Design comparison
Solution retrospective
This challenge felt quite nice to complete as this is starting to get on topics that I really wasn't sure how to do. This challenge helped me better understand using multiple backgrounds on one element, as well as pushed me to try and find a way to create an accordion without JavaScript, which I ended up Googling an answer for. I also used pseudoelements really for the first time and came to better understand their usefulness.
My question for this challenge is: When I open up an accordion, say I open up all of the paragraphs. That would need me to enlarge the height of my container, which would probably push everything else on the page downwards. How do you go about limiting Cumulative Layout Shift? Do you limit the accordion to opening only one section, or do you make the default height large enough to accommodate all the boxes open?
Community feedback
- @Enmanuel-Otero-MontanoPosted over 2 years ago
Hello wavegate! The solution I did was to open only one section (see my solution if you wish), but you can also do the other one that you propose, that the container has the height equal to the sum of all the questions with their respective open answers. On the other hand, your design is not responsive, it does not look good on mobile phones.
1@wavegatePosted over 2 years agoThanks, I've adjusted my media query to better reflect this specific challenge.
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord