Skip to content
Submitted about 1 year ago

Responsive design accordion

Carisa Elam•100
@carisaelam
A solution to the FAQ accordion challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • RyanDillon94•80
    @RyanDillon94

    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 🤣

  • Koda👹•3,830
    @kodan96

    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!

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