Skip to content
Submitted over 3 years ago

Responsive FAQ Accordion Card with JS, CSS Grid, and Flexbox

Brendan•170
@brendanmadden
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

Hi Everyone,

I had a blast learning to build an accordion with JavaScript for this challenge!

I have a couple of questions for anyone who might be able to help:

  1. How can I get that box to stay where it should while resizing the browser?
  2. Why aren't my accordions collapsing with a transition like they do when they open?
  3. How can I get the mobile image to stay where it should while resizing?

Thank you. Any feedback is really appreciated!

Brendan

Community feedback

  • Nick Carlisi•180
    @nickcarlisiPosted about 3 years ago

    Hi Brendan,

    I'm still working on this challenge myself, but regarding your first question, I had a similar issue. Try using percentages instead of rems in transform(translate). Hope that helps.

    Marked as helpful
    1
    Brendan•170
    @brendanmaddenPosted about 3 years ago

    @nickcarlisi Awesome. Thanks a lot for the tip, Nick! I'll give it a try and keep that in mind moving forward. Good to know. Good luck finishing yours up!

    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