0

I've come across a rather interesting problem and I'm completely baffled. I've never encountered this before in the past.

My Goal

To make a form on my website mobile responsive

Problem

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)
    • etc...
    • (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"

Question

Any ideas on what might be causing this? Thank you for reading.

UPDATE

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.

Improve this question
2
  • 1
    First, I'd suggest coding mobile-first if that's an option. So, your initial styles - the ones outside of any media queries - are for the smallest screen size you expect to encounter. That will make your site faster on mobile devices, and it'll also allow you to verify whether your styles are in fact applying. You may also want to add a bunch of different media queries with a different-colored border for each query, so that you can figure out what width your devices are reporting. Or add developer tools. Maybe you're using a plugin that uses more specific styles when it detects a touch device.
    – WebElaine
    Commented Sep 20, 2019 at 18:38
  • Ah...perhaps there is a wordpress plugin somewhere that is mucking things up. I'll check that. Regarding your suggestion to code mobile first, that's what I always do, but my partner (the lead designer) wanted me to do that at the end.
    – sansae
    Commented Sep 20, 2019 at 19:16

1 Answer 1

Reset to default
0

Can you see the changes in an incognito window on mobile? If so, then its most likely a mobile cache issue and a common way to fix that is by adding a version number to your css file i.e.

wp_enqueue_style( 'my-main-styles', get_stylesheet_directory_uri() . '/style' . $suffix . '.css', array(), $version_number_here );

If breaking the cache that way doesn't work I would try refactoring some of your code so it's mobile first as @WebElaine said and troubleshoot from there if it looks like there's an issue with your media queries.

Improve this answer
3
  • Hi zfors. I didnot see any changes in an incognito window on my android mobile. I cleared the cache as well but nothing showed. Regarding the version number for my css file, that version number currently is this: wp_enqueue_style('salutis-style', get_stylesheet_directory_uri() . '/style.css?r=2');; question though: how do we know what "version" number to use? It seems that ver num is set. Can we set it to any arbitrary number? I read this just now: wordpress.org/support/topic/changing-the-version-of-style-css (I was thinking of doing what Steve Stern suggested)
    – sansae
    Commented Sep 20, 2019 at 19:37
  • 1
    You can make the version number be whatever you'd like. In that example, Steve Stern is using php's filemtime php.net/manual/en/function.filemtime.php which is the modification time of the file. So it outputs the modification date as a string. You can use that if you'd like. Some people hardcode the date, or use the date() function. You can even just manually increment it every time you save it (i.e. 1.0.1, 1.0.2, 1.0.3 etc)
    – zfors
    Commented Sep 20, 2019 at 19:43
  • I tried Steve Stern's solution, and it worked, but it seemed only temporarily. After adding the modded date using filemtime, my changes rendered. But any changes I made after that did not reflect. I had to hardcode the version number to a new number each time i added new code to my stylesheet. So, I tried date(), and so far, it's working :) For previous projects, this did not happen to me at all. All my css rendered as expected and I did not have to update versions. What is causing this to happen? Why do I, all of a sudden, have to change version numbers?
    – sansae
    Commented Sep 20, 2019 at 21:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.