@pikapikamart
Posted
Hey, great work on this one. The layout on desktop is good, it's just a bit small but is fine and the mobile state is really good as well.
Suggestion/s would be:
- Selecting an accordion, some pop ups resizes the container right, it adds some height on it. To prevent that, if you want, you could remove the
max-height: 50rem
first on theaccordion
selector. Then in thequestion-area
, you could add amax-height: 440px
I used 440px since when you inspect your container, without any selected accordion, the initial height is 440px. Then just addoverflow-y: scroll
on the selector again. This make sure that the height will stay at 440px even if an accordion's content is big and it won't resize the container. But by doing this, this will add a scrollbar. To remove it, simply add
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Just change the selectors name to the container with max-height
. That is from w3schools.
Though that only, since you made this really good and clean markup, just a thing with those radio buttons, making it display: none
keeps functionality but removes accessibility. Overall, great work^^
@ardaberrun
Posted
@pikamart I appreciate your feedback. Thank you :)