Skip to content
Submitted almost 4 years ago

FAQ Accordion solution

TP•40
@viet88tp
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

For some reason I'm getting a scrollbar even though I'm using 100vh on the body... Didn't get a chance to do the phone view yet. Also made it so that you can only view one answer at a time, since I don't know how to extend the container.

Community feedback

  • David Payne•1,205
    @dpayne713Posted almost 4 years ago

    Hi TP,

    You are getting the horizontal scrollbar because your arrow div has a width of 500px and is causing that stretching. You should define a width for that to help with this issue.

    One trick to try is if you have a component that you know is it's own entity and all contents must stay inside is to use overflow: hidden on the container for the component. Then anything that overflows will disappear. It's not super helpful for troubleshooting code but has some helpful use cases.

    Hope this helps.

    David

    1

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