Order summary component - CSS Grid, Flexbox, SASS
Design comparison
Solution retrospective
I'm struggling to deal with background position. In wide screens the background image doesn't fill 100%.
Feedbacks are welcome!
Community feedback
- @sandro21-glitchPosted almost 2 years ago
Hi Leandro
Here are some suggestions to improve the code
You can use CSS to ensure that a background image fills the full screen, regardless of screen size. Here's an example:
body { background-image: url(your-background-image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; height: 100vh; }
In this example, background-size: cover makes sure the background image covers the entire screen, while background-position: center centers the image within the screen. The height property set to 100vh sets the height of the body to 100% of the viewport height, so the background image covers the entire screen.
Happy Coding
Marked as helpful0 - @HassiaiPosted almost 2 years ago
the background fills the entire width of the screen. there is no need fothe background- position.
There is is no need for the height in .component rather give .cmpnt-text a padding value for ll the sides. this a responsive replacement of that.
To center .component on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.
To center .component on the page using flexbox: body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
To center .component on the page using grid: body{ min-height: 100vh; display: grid; place-items: center; }
Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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