Media Queries Not Working in Safari

[cwc]

Hello all!

As I was developing the media queries for a website, I've noticed that the mobile version of the website is showing up just fine on for all widths when tested on the "viewport-resizer" tool (http://lab.maltewassermann.com/viewport-resizer/).

However, when tested on the iPhone's and iPad's Safari browser the media queries are not registering at all.

As I make the width of the screen smaller on Safari on my laptop, the website does not respond at all either.

Thus far, I have tried these methods to solve the issue:

1. I have checked to see that I do indeed have this in the html: <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

2. I also changed all the necessary declarations to include rem's and not just pixels.

3. I also tried adding an "!important" tag to every single deceleration in the media query and it still is not registering with Safari.

Would love to hear any thoughts or suggestions on what may be causing Safari to not respond to the media queries.

Thanks!

http://consciouswebcreations.com

[cwc]

A quick update:

I was able to test the website for responsiveness in other browsers on my pc and it seems that Safari & Internet Explorer are both not registering the media queries, while Firefox and Chrome are.

[cwc]

It turns out that I did not close several brackets for my media queries. A rookie mistake that shall not be repeated.

[Author]

Posts