HTML How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

The background is remaining Navy blue at all sizes. I'm unable to find any errors with my code.

This is my code:

@media screen and (min-width: 480px){ body { background: green; } }

Jawann Carmona
Jawann Carmona
19,556 Points

Are you placing this media query at the bottom of the CSS file?

It is at the top of a new css file

Jawann Carmona
Jawann Carmona
19,556 Points

Can you place your code here? Basically, your media query should be the last thing read in a CSS file. Else, it will not have priority over other stylesheet rules.

5 Answers

Tresean Adam
Tresean Adam
6,216 Points

Your media query should be just @media ... or @media and screen ... then it should work.

gabriel cajigas
gabriel cajigas
1,041 Points

I am having the same problem.
this is my code : @media screen and (min-width: 480px) { body { background: navy; } }

it's on a new css file that is the last stylesheet.

I am also having same problem with media screen, no matter what i do it is navy color for all sizes: my code:
@media screen and (min-width: 480px) { body{ background: navy; } }

and my responsive.css is after the main.css, like below: <link rel="stylesheet" href="css/main.css"> <!--should be after normalize.css, as we will be overwriting some rules--> <link rel="stylesheet" href="css/responsive.css">

What mistake I am making then i can't see. Will be grateful for the help!

Jawann Carmona
Jawann Carmona
19,556 Points

By declaring (min-width: 480px), you are telling the browser that above 480 px, everything should have the background color of navy.

If you wanted the background color to be navy at any screen size below 480px, you would set it to (max-width:480px). Then you could set your other sizes above that to change the background color based on say a (min-width: 700px) and (min-width:1000px).

Does that make sense?

Try 750px

David Pinner
David Pinner
7,039 Points

I just followed Jawann Carmona and put it to the bottom of the page and it sorted everything out.