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-main

#tailwind-css
mbongoelvis• 540

@mbongoelvis

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Yonten• 340

@yozidst

Posted

Hello 👋

Congratulations! on the challenge. A quick tip I would recommend is to give your container a desired margin-top value.

eg.

.container {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 34px;   // depending on preference; bottom padding* mainly 
    margin-top: 134px  // depending on preference; this was my setup
}

The padding or margin-top can be excluded for an inner div, depending on if you have another content div inside for all the info. This way your accordion is prevented from expanding higher and eventually cutting off your information; especially on the mobile layout. The padding will safeguard from contents from overflowing.

Keep up the grind! 👊

Marked as helpful

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