Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ Accordion solution

TP 40

@viet88tp

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

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

@dpayne713

Posted

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
Discord logo

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