Why does my CSS media query not apply on mobile devices even though the screen width matches?

Question

I'm trying to make my website responsive using a media query, but the styles inside it are not applying on my phone, even though I'm sure the screen width is under 768px.

body {
    background-color: white;
}

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

It works when I resize my desktop browser, but not when I open the same page on my phone.

Things I’ve tried:

Clearing browser cache

Testing on multiple phones

Making sure the CSS file is properly linked

Is there something I'm missing? Do I need to set a specific viewport in the HTML?

Does your page contain a viewport meta element? That is really the absolute basis of proper responsive layout for mobile devices. developer.mozilla.org/en-US/docs/Web/HTML/Guides/… — C3roe
– C3roe, Commented Apr 25 at 7:22

Banana-Master · Accepted Answer · 2025-04-29 07:59:05Z

0

Is the following code written inside the tag?

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

answered Apr 29 at 7:59

Banana-Master

231 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why does my CSS media query not apply on mobile devices even though the screen width matches?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related