CSS Media Queries not working in browser resize

Question

I have been doing a lot of research for days already on why this problem persists. So here it goes.

I have applied CSS media queries for smartphones. It works perfectly fine in the browser device simulator and the actual smartphone itself. But my client checks it differently, he resizes the browser. Unfortunately, the CSS media queries do not apply to the browser which breaks the entire layout.

My client insists to fix the breaks in browser resize but if I do this, it breaks the smartphone layout.

I have already added:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

And this is how I declare my queries:

@media only screen and (max-width: 767px)
{
...
}

@media only screen and (max-width: 360px)
{
...
}

Now, to fix the client's demand I have added something like this @media only screen and (max-device-width: 767px) to target specifically the smartphones.

For me, this isn't an efficient fix to what's happening. I just want to know where did it all go wrong and why the browser is not reading all my CSS media queries. I am hoping for an answer soon.

Answer 1

You must have some other error in your CSS or HTML. If I add your mediaqueries to a normal CSS file it get's used by the browser if you resize the browser.

See the following snippet to see how the background color of the page changes based on width.

 body { background-color: blue; } @media only screen and (max-width: 767px) { body { background-color: green; } } @media only screen and (max-width: 360px) { body { background-color: pink; } }

 <p> TEST CONTENT </p>