Skip to content
Submitted 6 months ago

Responsive design accordion

Carisa Elam•100
@carisaelam
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Happy to have figured out most of the JavaScript on my own with just a little help from the internet.

What challenges did you encounter, and how did you overcome them?

It took me a little bit to figure out how to order the code so that the plus and minus signs would switch appropriately and would line up with when the answers were shown.

What specific areas of your project would you like help with?

Couldn't figure out the best way to set media queries for this one for a good user experience. I felt like I just ended up selecting something I thought looks nice. What are the methods to finding "break points?"

My particular issue was figuring out when to switch the background images from the mobile version to the desktop version in a way that wouldn't be too jarring for a user.

Community feedback

  • RyanDillon94•80
    @RyanDillon94Posted 6 months ago

    Great solution, looks very neat!

    Media queries are new to me so I can't really provide much feedback on those unfortunately. I just went with max-width: 700px for the mobile views which seemed to fit best using viewpoints from Chrome's dev tools.

    I do have a question though... Why did you chose to use JavaScript for the content? I've never seen that before (newbie hobbyist) so very curious! Also the JS script looks very complicated and possibly over-engineered? Very impressive none the less! Mine was just a simple event listener and classList toggle 🤣

    0
  • Koda👹•3,830
    @kodan96Posted 6 months ago

    hi there! 👋👋

    Congrats on completing this challange, your solution looks pretty dope! 🙌

    About @media queries:

    • I don't think it's necessary for these type of designs to use them (other than modifying the font-size if you really wanna max things out, and some other basic stuff), since there's no layout shifts in the design.

    • You can mix width and max-width or clamp to set the width of your content container and center it with Flexbox or Grid (which you did, GJ 👍 )

    • the only thing I would consider is using the flexbox gap property on your .card__header to maintain some white-space between the icon and the question itself

    Hope this was helpful! 🙏

    Good luck and happy coding!

    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