Skip to content
Submitted 4 months ago

Frequently Asked Question App

vcollins1•410
@vcollins1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Making the app accessible

What specific areas of your project would you like help with?

Any feedback that will improve the accessibility of the app. How can I just adjust the width of a background image. and not the height.

Community feedback

  • Edwin Cheng•360
    @edwinc73Posted 4 months ago

    Looks very accurate and responsive. Good use of aria labels too.

    Minor details missing are the rounded corners and the box shadow.

    For the background I used a

           <div id="bg-image" className="w-100"></div>
       <section id="faq-section">
         <Faq></Faq>
       </section>
     </main>

    the .bg-image class would have a defined height, then i used negative margin on the #faq-section to layer on top. This would make sure that in all screen sizes the background and faq would always be on top of each other. Additionally I added a media query to change the bg to the correct image,

    0

Please log in to post a comment

Log in with GitHub

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