Skip to content
Submitted over 2 years ago

Responsive Accordion using Flexbox

Samantha•30
@samanthascarcella
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 difficulty trying to figure out how to prevent my card from raising to the top when I would open up the accordion. In the end, I just started the card low enough but I didn't figure out how to maintain the top position of the card.

Community feedback

  • Marcell Mihály•750
    @mihalymarcell86Posted over 2 years ago

    Hi @samanthascarcella,

    first of all, congrats on your solution. Very nice! :)

    The reason for your card seemingly moving to the top is that you set align-items: center on the body. Every time you open a dropdown, the overall height of your card component changes, and flexbox repositions it accordingly. It stretches in both directions. The way I solved this issue was that I set align-items: flex-start and added padding-top instead to position the card. This way, when it resizes, it will only extend downwards.

    Hope, that helps!

    Marked as helpful
    0
    Samantha•30
    @samanthascarcellaPosted over 2 years ago

    @mihalymarcell86 Thank you so much! I added a margin to my card after your comment and it resolved the problem. Thank you so much for the tip!

    0
    Marcell Mihály•750
    @mihalymarcell86Posted over 2 years ago

    @samanthascarcella Happy, I could help! :)

    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