Responsive Media Query Not Working in Google Chrome

Responsive media query not working in Google Chrome

add this line in <head>

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

Chrome Device Mode Emulation Media Queries Not Working

I fixed this problem by adding a meta tag to my page:

 <meta name="viewport" content="width=device-width">

UPDATE (December 2019):

It looks like you may also need to set the initial scale and minimum scale, like so:

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

Why Media query is not working on chrome browser?

Please try with this code first

@media screen and (min-width:320px) and (max-width:1000px) {
body{
   display: none !important;
}}

Because it's a problem with your selector, not media query.

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

css media query not working properly on google chrome

I have found the mistake I'am making is that I have zoomed out my chrome browser to 67% that was cause the problem of width scaling.
Now everything is working fine when I backed to 100% zoom.

CSS3 - Media Queries Not Working (Google Chrome)

The @media query is valid and works perfectly.

If it doesn't work in your application, it means you have a stronger CSS selector overriding the selector used in the @media query. Like, for example:

body {
  background-color: white !important;
}

@media screen and (max-width: 400px) {
  body { 
    background-color: red; 
  }
}

@media query still works, but !important rule has higher CSS specificity and therefore applies to the element.

Very important note: @media queries do not increase specificity. They simply tell the browser to apply the rule selectively based on the given condition. But, when the condition is true, the code inside it is treated as it if wouldn't have been wrapped in the condition. So it doesn't have increased specificity.

Note Another common reason for @media queries "not applying" is when they're tested in browsers with a zoom level set at another value than 100%.

To reset the zoom level of your browser use Ctrl + 0

To see where the currently applying value for any CSS property on any element in your page comes from (what selector, what stylesheet, what line number), all you need to do is to use a browser developer console (typically opened by selecting "Inspect Element" (or similar) from the context menu, if used on the element).

My Media Query is not working on google chrome and firefox

Your CSS syntax for the media query should be like this:

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (max-width: 480px) {

  //CSS

}

Shamelessly copied and modified the CSS Snippet from:

https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488

Bookmark the link for future references.
Also, I would recommend that you always use rgba() or hexadecimal values for colors in CSS.

Here's a fiddle:

#header{  background-color: black;  color:white;}
@media (max-width: 480px) {  #header{  background-color: blue;}}

<div id="header">Hi there!!!!!</div>
<!-- Try Modifying the size of the HTML Output Section -->

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

Responsive Media Query Not Working in Google Chrome