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?