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

NFT card responsive

@jmanprojects

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I don't know why, when I put 100 vw and 100 vh to the main container, it creates the scroll bars

Community feedback

@devsotter

Posted

"Hi, when you use vh and vw, you are setting the height and width in relation to the viewport size, if you go beyond the content area, scrollbars will be generated. In your case, there is padding on ".container-content" which is causing it to break and exceed the viewport. You can solve this kind of problem by using the "box-sizing: border-box;" property (I recommend looking into this). You can also remove the padding or use fixed measurement units such as px."

Marked as helpful

1

@jmanprojects

Posted

@devsotter Thanks, I'll check it to update the code

0
HK273 530

@HK273

Posted

Nice job! Chuck this on the body tag to get rid of the scroll bars....

body {
overflow: hidden;
}

This will drop your footer out though so you may want to re-configure your html / other styles a bit if you want to keep the attribution div

Marked as helpful

0

@jmanprojects

Posted

@HK273 thanks, i'll check it

0

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