CSS fixes, overlapping text, etc.

Fixed: Text Overlap Issue in Radio Group on Mobile Devices #1 / revengeday/cyber-circle-creator#1
Fixed: FAQ Answer Box Text Cut-Off Issue #2 / revengeday/cyber-circle-creator#2
Fixed: Text Overflow Issue in Specific FAQ Question #3 / revengeday/cyber-circle-creator#3
This commit is contained in:
Ramses Revengeday 2024-11-16 20:52:39 +00:00
parent 3f8ca967f1
commit c81eda13f7

View file

@ -119,6 +119,7 @@ input[type="text"]:focus {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
} }
.radio-group input[type="radio"] { .radio-group input[type="radio"] {
@ -137,6 +138,9 @@ input[type="text"]:focus {
border: 2px solid transparent; border: 2px solid transparent;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
color: var(--cyber-font-color); color: var(--cyber-font-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.radio-group input[type="radio"]:checked + label { .radio-group input[type="radio"]:checked + label {
@ -246,6 +250,8 @@ button:active {
position: relative; position: relative;
margin-bottom: 5px; margin-bottom: 5px;
transition: background-color 0.3s; transition: background-color 0.3s;
white-space: normal;
overflow: visible;
} }
.faq-question::before { .faq-question::before {
@ -271,7 +277,7 @@ button:active {
} }
.faq-checkbox:checked + .faq-question + .faq-answer { .faq-checkbox:checked + .faq-question + .faq-answer {
max-height: 500px; max-height: 100%;
padding: 15px; padding: 15px;
} }