Steve Medley Steve Medley - 6 months ago 13
CSS Question

Changing background color based on browser size in CSS

I can't figure out what is wrong with this code. The background color doesn't change at all, it just stays white the entire time.

<style type="text/css">
h1 {
position: absolute;
text-align: center;
width: 100%;
font-size: 6em;
font-family: Roboto;
transition: all 0.5s;
}

@media screen and (min-width: 0px) and (max-width: 400px) {
background-color: red;
}
@media screen and (min-width: 401px) and (max-width: 599px) {
background-color: green;
}
@media screen and (min-width: 600px) {
background-color: blue;
}
</style>

Answer

Try:

@media screen and (min-width: 0px) and (max-width: 400px) {
    body { background-color: red; }
}
@media screen and (min-width: 401px) and (max-width: 599px) {
    body { background-color: green; }
}
@media screen and (min-width: 600px) {
    body { background-color: blue; }
}

The background-color property is now assigned to the body