How can i make a background color cover or contain the body

HTML-CSS
1

Good morning freecodecampers i have been trying to make the porfolio home page responsive for mobile view below 768px using grid layout. But the background color isnt covering 100% height of the page

@media only screen and (max-width:768px){


.container{
    display: grid;
    grid-template-rows: 0.5fr 0.4fr 2fr 1fr;
    grid-template-columns: 1; 
    height: 100vh;
    background:  linear-gradient(120.26deg, rgb(240, 175, 122) 11.2%, rgb(253, 145, 212) 54.5%, rgb(176, 222, 234) 99.6%,rgb(115, 152, 231)24%);
    background-color: pink;
}
2

try setting padding to 0 in the css

1 Like
3

It still didn’t work out after setting the padding to zero

4

Hello @AdeJoey !

For future posts, please include the complete code for both html and css using the Help that appears after three unsuccessful attempts at a step?

If you place a curly bracket after this, and use a new body element selector for the background-color property and the value “pink”, it should work to cover the page.

Example:

.container{
properties and values as you have them
}
body{
property: value;
}

Remove the curly bracket currently below the background color so there will be success.

Happy coding!

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.