Skip to content
Submitted over 1 year ago

FAQ-Accordion

NeetoDev•210
@LySabrina
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I had difficulties with:

  • Positioning the images using position
  • Some window size does not correct align the image
  • units for responsive design

These were the main things I struggled with. Making sure the image is aligned even when you resize the window was difficult. Additionally, I was unsure of the units for the containers as when a user opens the questions, the image may be pushed out of view.

I wonder if % are best for containers width and height for responsive design?

Overall, fun project on responsive design and touching a bit of JavaScript.

Code

Please log in to post a comment

Log in

Community feedback

  • Bruce B•505
    @bbsmoothdev

    Another suggestion. You shouldn't add event handlers to non-functional elements such as h3 because keyboard users can't access them. I would recommend you use a button for the questions and then add the click handler on the button.

    Also, you'll need to work on the responsiveness a little. Always perform the following test. Set your browser width to 1280px and the height to 1024px and then zoom in 400%. If you do that I think you'll see some issues that need to be fixed.

    Marked as helpful
  • Sameh•430
    @SamehCode

    here is my advice to you , i made this challenge before. you can do it use positioning between parent container(position: relative) and image element with (position: absolute) then use left with negative values to get out of the box ;) example(left: -30px, left: -2rem, etc...) hope it help you at all good luck .

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