FAQ Accordion Card using Flexbox

Solution retrospective
- I still don't really fully comprehend the image overlaying part, so I just end up guessing the numbers.
- If you toggle all the questions and the height of the container goes below the viewport, there's no scrollbar for some reason. I'm assuming this has to with JS.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Deevyn9
Hi, congrats on completing this project, your solution looks really great. However, I found a few issues that would need resolving:
(i) You'll need to add
background-repeat: no-repeat;
to the body to prevent the gradient from repeating.(ii) You'll need to add a
min-height: 100vh
to the body anddisplay: grid
place-items: center;
to center the container.I hope you find these helpful.
Happy Coding! 🎉
- @nelsonleone
Hello, ...congrats completing the challenge🎊🎊.
Here are some things i noticed ,i have hope it helps you fix them.
- Firstly, there's no scroll-bar because you must have set a height on your container. Hope you get it worked out fine.
And one more thing , you forgot to add an alt text to you image. If the image is just for design purposes, you can add
alt=""
Andaria-hidden="true"
for (AT) so screen-readers won't bother about them.But if sends a message(not for just design) consider adding an alt text to them
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