@Media Query Not Working in Mobile. Works Fine in Chrome

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

@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">.

@media query works fine in Chrome, but not working on mobile

It is most likely your phone is wider than 400px therefore doesn't enter the media query condition.

You can achieve what you want without using media queries, just using max-width with width like this:

.home-wrapper {
  position: relative;
  max-width:1366px;
  width: 100%; /*or another value you want here like 90% or 90vw */
 /* just for demo */
  height: 200px; 
  background: lightblue
}

<div class="home-wrapper"></div>

media query working on chrome but not on mobile

You should add this meta tag in <head></head>. More information from MDN

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

Media query works on mobile Firefox but doesn't work on mobile Chrome

Add this meta tag into the header of your HTML file:

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

This should solve your problem. Otherwise the browser might not resize because it will not accept that the screen size is meeting your media query criteria.

Why are my CSS3 media queries not working on mobile devices?

All three of these were helpful tips, but it looks like I needed to add a meta tag:

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

Now it seems to work in both Android (2.2) and iPhone all right...

Responsive media query not working in Google Chrome

add this line in <head>

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

@Media Query Not Working in Mobile. Works Fine in Chrome