Built Frontmentor accordian using pure css html and javascript

Solution retrospective
I managed to built an accordian that is responsive and i managed to add behaviour to the icons inside.
What challenges did you encounter, and how did you overcome them?i learnt how to use background-image and background-color together to create nice background i also learnt how to use background-repeat and background-size property
What specific areas of your project would you like help with?I still could not find the solution on how to stop vertical scrolling from moving when i expand or minimize the FAQs answers.
Please if anybody knows how to solve this problem, do write here.
Thanks in advance.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @MarziaJalili
Well done, SIR!!!
Here is a breakdown of the puzzle you encounter:
The issue comes from this line:
margin: 8rem auto;
which adds some margin to the top and bottom of the page, regardless of how long the
card
can get.I assume you have put this to centerize the
card
.Get rid of that and simply apply these line to the
body
selector:display: grid; place-items: center; min-height: 100vh;
it will perfectly centerize the card without further issues.
Hope it was helpful, for more clarity you can check out my solution as well😁😁.
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