I just spent WAY TOO LONG trying to figure out why a site wasn’t validating at Google’s Mobile Friendly Test.
Turns out it was something only turning up in Safari and iOS. Specifically Safari 5, the one on Windows with no good debugging tools.
This is all I needed to validate as mobile friendly:
.header-search { float:none; }
When you google “safari media query” or “safari media query not working” or “safari responsive not working” 99% of the results are some idiot saying:
“SOLVED: I AM TOO STUPID TO CLOSE MY BRACKETS, HURRRRRRRR!”
The other 1% of results are people saying:
“OH SHIT, I’M ALSO TOO STUPID, THANKS FOR THE FIX GUY! HURRRRRRR!”
So if you are having trouble getting a site to validate as mobile friendly, and it seems to be mobile friendly, try checking it in Safari.
If that’s the problem, try setting float:none on anything that is supposed to be responsive using width:100%
That just may be the reason that responsive media queries are not working in safari!
Sorry for the short post, I just wanted to get a real answer online if anyone else was having that problem.
Leave a Reply