Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ-Accordion

LySabrina• 180

@LySabrina

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

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

@bbsmoothdev

Posted

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

@LySabrina

Posted

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

0
Sameh• 430

@SamehCode

Posted

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

@LySabrina

Posted

@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
Discord logo

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