Search code examples
twitter-bootstrapcssmedia-queries

Can you nest a media query inside another media query?

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

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

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

}