Quick Question: Help with @media queries

[Muessig]

I'm making a website where I want to use 4 layouts. These are as follows:

 

1. @media screen and (min-width: 1196px) {

}

 

(If the screen is over 1196px, use this layout.)

 

 2. @media screen and (max-width:1195px){ {

}

(If the screen is under 1195 px, use this layout.)

 

3. @media screen and (min-width: 480px) and (max-width:1194px){

{

(If the screen is over 480px and under 1194 px, use this layout.)

 

4. @media screen and (max-width:480px) {

}

(If the screen is under 480px, use this layout)

 

My problem is that numbers 1, 2 and 4 are working fine, but the third media query is being ignored for #2. If I specify #2 should be between certain widths then that layout breaks and the browser treats it as if it doesn't exist.

 

Any help?

 

[Nick H. Supervisor]

What code is this? Not that it matters, I think I can see the issue: number 3 is redundant. Either section 2 or section 4 will take care of the layout, from what I understand.

[Muessig]

I've uploaded the code here: https://www.dropbox.com/s/cf0rprn29ckcjlz/styles.css

 

How would I change it so that all 4 layouts work in tandem with each other? Anything I've tried so far will break the page or mean that #3 is ignored.

[Nick H. Supervisor]

How would I change it so that all 4 layouts work in tandem with each other? Anything I've tried so far will break the page or mean that #3 is ignored.

You can't, from what I can see. You've created 4 rules when you only need 3.

If size < 480px, use this template.

If 480px > size < 1195px, use this template.

If size > 1195px, use this template.

Your third rule is the same as rule 2 and 4 combined - you're stipulating min and max width which rule 2 and 4 take care of (maybe one of those should be length?)

Although as I said, I haven't worked with it before so perhaps I've got the wrong end of the stick.

EDIT: Hang on, I've made a mistake myself I think...let me think about that again.

EDIT 2: Would something like that work? Hmm...

[Muessig]

I've changed the rules to the following:

 

1.@media screen and (max-width:480px) {}

2. @media screen and (min-width:980px){}

3. @media screen and (min-width:480px){}

4. @media screen and (min-width: 480px) and (max-width:1194px){}

 

This seems to be working so far. Does anyone know if this is the best setup or if there's a better way of achieving what I need?

[Seahorsepip Veteran]

Mediaqueries shouldn't overlap.

So look at querie 2 and 3,

2: below 1195

3: below 1195 px and above 480

If you make media querie 2 above 560 as example it will break...

Instead write this,

2: below 1195 and above 560

3: below 560 and above 480

Also the lowest mediaquerie overrules the ones above.

[Nick H. Supervisor]

Mediaqueries shouldn't overlap.

Thank goodness, I thought I was going mad!

[Muessig]

I've changed the rules to the following:

 

1.@media screen and (max-width:1196px) {}

2. @media screen and (min-width:980px){}

3. @media screen and (min-width:481px){}

4. @media screen and (max-width:480px){}

 

Sorry I wrote it wrong before, this is what I have now. Is this correct?

[Seahorsepip Veteran]

 

 

That's fine although it's a bit weird sort of mediaquerie for a responsive site

Most people write max width 1000, max width 800, max width 600, max width 480 etc. And then use that to add adittional css modifications when the screen becomes smaller then specified widths.