@kenreibman
Posted
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
@vlubosh
Posted
@kenreibman thank you for your feedback, i`ve decided to create just two sizes(desktop, mobile), main point was to train functions(need to refactor in future).
have a nice day.