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

Order Summary Card Mobile-first CSS Grid, Flexbox

@alawi17

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How did you remove scrolling? Can someone help me with my code. Thanks in advance ๐Ÿ™‚

Community feedback

Arlagonixโ€ข 410

@arlagonix

Posted

How did you remove scrolling? There are 2 options:

  • Set margin: 0 to body tag. I recommend this approach
  • Set overflow: hidden to body tag

Also your background doesn't stretch to full width

If you're publishing your code on Github, I recommend to use Github Pages to host there your working application. Thus you will keep both code and demonstration in one place

Marked as helpful

1

@alawi17

Posted

@arlagonix Thanks for the feedback, that's really helpful. I did the first option and also set the background size to cover. About to use Github Pages, I will use in the future project ๐Ÿ˜Š

0
Mirna-Latifโ€ข 80

@Mirna-Latif

Posted

Try to set the height: 100vh; to the body tag to remove the scrolling. I hope this will be helpful. body { height: 100vh; }

0

@alawi17

Posted

@Mirna-Latif Thanks for the feedback, I use @arlagonix way for setting margin: 0 to body tag.

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