Submitted about 3 years agoA solution to the FAQ accordion card challenge
function created with JQuery
jquery
@vlubosh

Code
Please log in to post a comment
Log in with GitHubCommunity feedback
- @kenreibman
Great job! I like your use of jQuery on the accordion.
Initially your design looks great, but your entire card starts to fall apart when the viewport width starts to get smaller. I have a few suggestions...
- I believe you are having these issues because you are giving your containers a fixed
width
andheight
. Giving fixed dimensions like that lead to lots of responsiveness issues. Instead I would start usingmax-width
, and userem
units instead ofvh
andvw
for setting container dimensions. - I also highly advise you against declaring a set
height
, and let your content expand on its own. Very rarely do I set a specific height for certain containers in my projects. This relates back to your parent element, which is yourbody
tag in this case. I would set amin-height: 100vh
to make it more responsive. - You might also want to look at your media query breakpoints again, as there is a gap between your desktop to mobile layout where it completely breaks the entire website.
I actually recommend you to take a look at a video of someone completing this challenge on Youtube, or look at my code for the same problem
I hope this helps and keep learning!
Marked as helpful - I believe you are having these issues because you are giving your containers a fixed
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