Skip to content
Submitted over 2 years ago

FAQ accordion card challenge solution

Mo'men Kamal•130
@momenkamal221
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

The background was a little bit tricky, because the body fits the content and linear-gradient() returns an image the rest of the page was white, I set the height to be 100vh but for small height screens when you scroll down the rest of the page background was also white, the last thing I made min-height: max(100vmin,100vh); and it kind of worked, I still can see the scroll bar which is mean there is an overflow on the body and this is what not expected, how to make that background correctly?

Community feedback

  • bikeinman•1,080
    @BikeInManPosted over 2 years ago

    Hi,

    I think your margin on huger div is causing it to overflow. Instead of margin, try using padding. It will remove the scrollbar. But you may have still some work to do with image positioning.

    .huger { margin:auto; /*! margin-top:150px; */ position: relative; width:fit-content; padding: 150px; }

    1. I too had the same problem a white band appearing beneath the content sometimes. On @faruqAbdulHakim 's advice, the following worked. a. wrap all elements inside body in a container div, or use main element b. set min-height:100vh on the main.

    Hope this helps you. Good Luck.

    0
  • Karol Binkowski•1,640
    @GrzywNPosted over 2 years ago

    You can use background-size property for example: background-size: cover or background-size: contain inside of body selector depending on what you want to achieve. Also it's good practice to put min-width: 100vh into body. Have a nice day and keep coding !

    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