I've come across a rather interesting problem and I'm completely baffled. I've never encountered this before in the past.
To make a form on my website mobile responsive
Absolutely NONE of the new styles I've written are applying on mobile. NONE. My media queries are being applied when I resize my browser in the inspector tool's mobile responsive view, but not on any mobile phone I've looked at.
Things I've tried
I've used SauceLabs.com to try to debug this, but the same thing is happening. My media query styles are not being applied.
I've refreshed the cache in my phone, closed the browser, shutdown my phone and restarted.
I've also tried applying a simple "border: 3px solid red" for the entire page (outside of the media query). The border shows on my laptop and pc browsers (for chrome, firefox, explorer), but that border does not show in my android phone, nor my android tablet.
My website is being hosted on Pressable.com. I'm coding in "development mode" and I've tried purging the cache several times. Still nothing.
I've tried a variation of @media queries:
- @media only screen and (max-width: 600px)
- @media screen and (max-width: 600px)
- @media (max-width: 600px)
- @media only screen and (min-width: 600px)
- (I know the difference between min and max; i just tried various things to see if I could get SOMETHING to render)
In the section, I have the viewport set like so:
meta name="viewport" content="width=device-width, initial-scale=1"
Any ideas on what might be causing this? Thank you for reading.
Zfors helped me solve the problem as it appears to have been a mobile cache issue. Updating the version of my style in my functions.php file fixed the issue of my styles not rendering on mobile devices. However, a question I forgot to ask the community was, why did I have to change the version number in the first place? In previous wordpress projects, I did not have to do this at all.
For those struggling with this issue, Steve Stern has a nice solution but filemtime() did not work all that well, so I used time() instead.