Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

FAQ Accordion page with HTML, Tailwind CSS and React

react, vite, tailwind-css
Riccardo Bellini•100
@riccardobellini
A solution to the FAQ accordion challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Riccardo Bellini's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License