1

I recently had a re-think about my website and decided that if I was going to build something new I might as well go all the way and make it responsive with CSS. So I've built it and tested it out by resizing the browser window down from full size (1366px) down to it's smallest size of 440px (Which I know is larger than the recommended mobile size but I have that covered).

I'm using media screen and my code is set up like:

/*Media Screen*/
@media screen and (max-width: 1120px){
    /*Code In Here*/
}
@media screen and (max-width: 680px){
    /*Code In Here*/
}
@media screen and (max-width: 460px){
    /*Code In Here*/
}

So I've uploaded the website and again tested it and all is working fine. I decided to run it through the new Google Mobile Friendly Test and I was amazed to find that it was showing the site at a width of around 1120px mark, which is just after the first screen width set in my CSS. What gives? Shouldn't it pick up that the site width can go right down to 440px?

I know that it will more than likely say that my site is still mobile unfriendly but is there a way to sort out this sizing error?

|improve this question
  • Not sure about the Google Mobile Friendly Test and how it should behave. I did the same thing to my site a while ago and used Chrome's developer tools to check the site. Worked a charm! (If that helps.) – closetnoc Oct 13 '15 at 20:00
  • It's not about sizing. Please Note that Google only checks for the following features: -Avoids software that is not common on mobile devices, like Flash -Uses text that is readable without zooming -Sizes content to the screen so users don't have to scroll horizontally or zoom -Places links far enough apart so that the correct one can be easily tapped (See:googlewebmastercentral.blogspot.de/2014/11/…) – Seb Oct 14 '15 at 20:49
1

If you've got a Google Search Console profile with this web site included, go and check it and make sure you haven't got a warning message of some sort.

If you do (or even if you don't), check that that your css, js and image/media files/folders aren't noindex in your robots.txt or .htaccess (if you're running on apache.)

Google wants to see everything now.

|improve this answer
  • Thanks. I have a Search Console but as I only put the site online yeterday I'm seeing the old No data available and have no messages, so I'll probably have to wait a little bit longer. I have a .htaccess file but it's only running Rewrite Rule, and I currently don't have a robots.txt file. I'm going to put a document.location redirect for screens below 440px anyway so sopefully this will sort the problem out, however would have been nice to see exactly how Google do view your website in it's desktop view, seeing as we go to the effort to make it as mobile friedly/responsive as possible – Unhappy Blogger Oct 14 '15 at 8:15
1

I had similar issue. Make sure the old version of your CSS is not cached anywhere. I had to enable developer mode in CloudFlare to fix this although it wasn't necessary for the browser.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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