Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ Accordion Card using Flexbox

isamardzijaโ€ข 280

@isamardzija

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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.

Community feedback

Divine Obetenโ€ข 2,435

@Deevyn9

Posted

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 and display: grid place-items: center; to center the container.

I hope you find these helpful.

Happy Coding! ๐ŸŽ‰

0
Nelsonโ€ข 2,380

@nelsonleone

Posted

Hello, ...congrats completing the challenge๐ŸŽŠ๐ŸŽŠ.

  • 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="" And aria-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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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