CODEWITHSUNDEEP
htmlcss
Keith
Keith

Reputation: 147

CSS Media Query not responding

I've been reading a lot about RWD and really wanted to give it a go so I have a website to build for a friend and thought it would be a good tester. I watched a video on YouTube that said if you were starting from scratch building a site and want it to be responsive, build it from the smallest viewport then scale it up as you go a long, so this is what I am doing.

However, my first CSS media query: 

@media only screen and (min-width: 480px) and (max-width: 767px) { 
body {
background: #000;
}

Once the device / browser reaches a min width of 480px and I want the background to go black (purely for testing purposes) it doesn't seem to respond.

Here is the code for my website: http://jsfiddle.net/F6Xbp/

Originally I did have a media statement that said:

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

This was where I began building the website, but i removed this as I thought that as each viewport is recognised, the styles would be over-ridden so I could use the max-width: 479px as my base starting point.

I look forward to hearing some replies and no doubt I'm overlooking something so simple here.

Keith :-)

Upvotes: 0

Views: 1036

Answers (2)

Zach Saucier
Zach Saucier

Reputation: 25954

Updated jsFiddle

You need to put the code you want to change within the @media queries and makes sure they don't overlap each other (or are at least positioned in sequence to where it doesn't matter if they are). As you had it the bottom most media query was overriding most of the others

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
 body {
    background: #000;
}
/* All Mobile Sizes (devices and browser) */
 @media only screen and (max-width: 767px) {
    body {
        background: red;
    }
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
 @media only screen and (min-width: 768px) and (max-width: 959px) {
    body {
        background: green;
    }
}
/* Smaller than standard 960 (devices and browsers) */
 @media only screen and (min-width: 959px) {
    body {
        background: blue;
    }
}

Upvotes: 1

Ali Gajani
Ali Gajani

Reputation: 15091

I made it work: http://jsfiddle.net/F6Xbp/1/

Technique 1

@media screen and (max-width: 480px) {
    body { background-color:black; }
}

Technique 2

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {    
    body { background-color:black; }
}

For the difference between max-width and max-device-width, see this.

Upvotes: 1

Related Questions