Skip to content
Submitted over 2 years ago

FAQ accordion card using matchMedia

Katherine•100
@rendongzha
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 community,

I am not sure why in the mobile design, the background gradient starts at the top of the white container, which looks weird. As I expected, I used top margin on the container when the screen is narrow, which should work so that the gradient starts at the top of page. The two classes in the of the container are container and narrowContainer in the stylesheet.

Thanks for any suggestions!

Community feedback

  • Sahand Masoleh•1,210
    @sahand-masolehPosted over 2 years ago

    You can use "min-height: 100vh" to make sure that your body element covers the entirety of the screen. That's the reason for both the gradient issue and also the desktop view not being centered vertically.

    0
    Katherine•100
    @rendongzhaPosted over 2 years ago

    @sahand-masoleh Thank you! After I add this property on body and separate body selector and html selector, it works fine.

    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