Issues With Media Queries – IE & Safari

[Cole Welty]

I’m developing a new wordpress site in Chrome – as per usual.

I’ve started testing in Browserstack and am really confused. The site looks and functions correctly in Chrome and Firefox. But Safari and IE are not seeing the media queries. I developed it in a mobile first fashion – so on a wide view I’m still seeing the mobile layout. Maybe the coffee hasn’t kicked in yet – but I’m fairly certain I’ve written the media queries correctly. I’m using em’s for the media query widths if that makes any difference.

http://new.colewelty.com

[Cole Welty]

As you were folks. I found the issue.

I started with the boilerplate css file. I had my styles inside of the
@media only screen {

}

It’s followed by

@media only print{

}

So, anyhow all of my styles were in the screen media query. So, since I was already targeting @ screen my nested media queries were becoming invalid in safari and IE.

[Author]

Posts