Search code examples
htmlcssmedia-queries

Site not responding to media query

I'm using Windows 10, Codeigniter, jQuery and Firefox 43.0.4 although I can't see why that would affect this issue. I want to apply styles to an iPad size window so I'm using this media query:

@media only screen
and (min-device-width: 768px)
and (max-width: 1024px)
{
    *{color:#ff0000 !important;}
}

as a test that should turn all text red but it's not working in Firefox 43.0.4 (or Chrome etc). I'm also using the Web Developer extension to set the portal to the correct size. I've used the head section metatag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Probably obvious but I can't see it and I've used media queries before. This is driving me nuts and I would be grateful for any suggestions as to where I'm going wrong.

Solution

  • I believe you are missing the device prefix, the CSS should be:

    @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}

    You can read more information on Stephen Gilbert's site.