Can you nest a media query inside another media query?

Question

I have a safari only issue that only appears when the device width is tablet or lower "max-width:1024px". Is it possible to nest a media query inside another media query?

@media screen and (max-width:1024px){
     @media screen and (-webkit-min-device-pixel-ratio:0)
     { 
        /* Safari and Chrome */
        ul#squareImgUL{
            bottom: 10px;
        } 

        /* Safari only override */
        ::i-block-chrome,ul#squareImgUL{
            bottom: 0px !important;
        } 
    }
}

score 2 · Accepted Answer · answered Jun 11 '15 at 19:54

2

Unfortunately you can't but pairing them up works fine too

@media screen and (max-width:1024px) and (-webkit-min-device-pixel-ratio:0){

}

answered Jun 11 '15 at 19:54

Coding Enthusiast

3,865
1
27
50

Thanks this fixed it! – SpiderMan Jun 11 '15 at 20:07
no problem @SpiderMan – Coding Enthusiast Jun 11 '15 at 20:08
The linked duplicate says that you can nest media queries or is there a difference in your question? – 1.21 gigawatts Feb 26 '19 at 11:30

Nikhil Aggarwal · Answer 2 · 2015-06-11T19:59:25.600

0

Unfortunately, you can not nest the media queries but you can use the and operator

@media screen and (max-width:1024px) and 
    (-webkit-min-device-pixel-ratio:0) {
...

edited Jun 11 '15 at 19:59

answered Jun 11 '15 at 19:48

Nikhil Aggarwal

28,197
4
43
59

When adding max-width in using "and " the the styling stops working. @media screen and (max-width:1024px) and (-webkit-min-device-pixel-ratio:0) { /* Safari and Chrome */ ul#squareImgUL{ bottom: 10px; } /* Safari only override */ ::i-block-chrome,ul#squareImgUL{ bottom: 0px !important; } } – SpiderMan Jun 11 '15 at 19:50
Not clear with what you are saying. Please elaborate – Nikhil Aggarwal Jun 11 '15 at 19:53
I just tried adding both media queries together using "and" and it breaks the styling. – SpiderMan Jun 11 '15 at 19:56
There was a small glitch. @media screen was added twice. I have updated the code. Try now. – Nikhil Aggarwal Jun 11 '15 at 19:57
1

You have too many `and`'s – Turnip Jun 11 '15 at 19:58
Thanks. Probably not my day today :) – Nikhil Aggarwal Jun 11 '15 at 19:59
fixed it to avoid any confusion to those using these answers. – jrdnmdhl Jun 11 '15 at 20:00
Thanks. Appreciate your help :) – Nikhil Aggarwal Jun 11 '15 at 20:02
Somebody voted negative for the answer - Can I please know the reason? – Nikhil Aggarwal Jun 11 '15 at 20:04

Can you nest a media query inside another media query?

2 Answers2