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

@PierreMigne

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


How can i place the orange box ?

Community feedback

P
Grace 27,350

@grace-snow

Posted

Hi this looks pretty good for me on mobile. Only a few small suggestions :

  • if you change body to min- height instead of height the background won't suddenly cut off on mobile
  • it's bad practice to jump heading levels, poor for both SEO and assistive technology. So make those headings into h2s instead
  • I'd also recommend you swap to buttons to toggle your questions (inside the h2s). You can use inherit all in the css to style that button the same, and by using an interactive html element you get the bonus of making your solution instantly keyboard and assistive tech accessibile 🎉

Hope that helps ☺

2

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