Submitted 2 months ago

Frequently Asked Question App

vcollins1• 410

@vcollins1

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

FAQ accordion

HTML
CSS
JS

1newbie

View challenge

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• 340

@edwinc73

Posted about 2 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,

Please log in to post a comment

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