CSS Media Query not responding

Question

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 :-)

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

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.

edited May 23 '17 at 11:49

Community

1
1

answered Aug 17 '13 at 13:36

Ali Gajani

14,762
12
59
100

Hi Ali, thanks for your response. I have no issue with max-width: 480px because I removed that line and just used all that styling for my base styles. It's the @media screen and (min-width: 480px) and (max-width: 767px) that doesn't seem to work for me :-/ – Keith Aug 17 '13 at 13:46
So what's the issue? You said "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." I did that :) – Ali Gajani Aug 17 '13 at 14:10

score 1 · Accepted Answer · answered Aug 17 '13 at 13:44

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;
    }
}

this answer definitely cleared up my problem but Ali's was also good for the link to the difference with max-width and max-device-width. thank you to you both, really helped me out! — Keith, Aug 17 '13 at 14:11

CSS Media Query not responding

2 Answers2