@media query not working in mobile. Works fine in Chrome

Solution 1:

@Andy is right, double check your device-widths, or you could always just use min-width so you don't have to know every device width.

Regardless make sure you have a viewport tag, like <meta name="viewport" content="width=device-width,initial-scale=1.0">.

Solution 2:

Fantastic - forgot the viewport too! Fot all: Just add

<meta name="viewport" content="width=device-width,initial-scale=1.0">

in your head

Solution 3:

Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.

Thus this worked for me:

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Solution 4:

I know this is an old post, but I recently had an issue like this. I ended up fixing it by removing the CSS media query from the main CSS stylesheet, and entering the specific needs for mobile on the html style section instead. Don't know why it worked, but it did.