Skip to content
Submitted 11 months ago

FAQ-Accordion

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

Design comparison

SolutionDesign

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.

Community feedback

  • Bruce B•505
    @bbsmoothdevPosted 11 months ago

    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
    1
    LySabrina•180
    @LySabrinaPosted 11 months ago

    @bbsmoothdev Thank you for the code critique and taking the time to comment. I will be sure to make these updates!

    0
  • Sameh•430
    @SamehCodePosted 11 months ago

    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 .

    0
    LySabrina•180
    @LySabrinaPosted 11 months ago

    @SamehCode Thank you for your tip and taking the time to comment! I will implement your suggestion :)

    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