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 page with HTML, Tailwind CSS and React

@riccardobellini

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What challenges did you encounter, and how did you overcome them?

It was impossible to stretch the background image to the full width of the viewport when screen size was more than 1440px (the width of the image), without ignoring the aspect ratio. The image was scaled in any case preserving the aspect ratio, but that implied the colored background part of the page being taller and not proportional with respect to the design. The background-size: 100% didn't work in any of its variants, but I found that after converting the image to png, the image could be stretched to full width and fixed height.

Community feedback

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