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

Reponsive accordion white vanilla javascript

@RobertoBaiochi

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 confess that I had difficulties to hit the breakpoints and I couldn't do it the way I imagined, but I did the best I could.

Community feedback

Harsh Kumar 1,390

@thisisharsh7

Posted

Hey RobertoBaiochi, well done! your solution looks perfect.

Your page responds well to different widths. You used flexboxes here, which is a great tool for creating responsive designs. Your HTML code is clear and easy to read for anyone. The JavaScript concept you apply here are also appreciable. In the same way that you used flex to different elements, here instead of using margin: 8rem 8rem 1rem 7rem; and margin-top: 12rem in the .accordian-section to align the accordian to the center vertically, you can add display: flex; flex-direction: column; justify-content: center; and little margin from all side.

hope this helps you, happy coding ✌️.

Marked as helpful

1

@RobertoBaiochi

Posted

@thisisharsh7 Wow! Thanks, I hadn't noticed that! Thank you very much for the feedback. I'm going to start paying more attention, instead of trying to fix some things manually, I'm going to start experimenting with the tools better.

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