CODEWITHSUNDEEP
androidcssiosmobilemedia-queries
Atheneor
Atheneor

Reputation: 51

CSS Media Queries don't work on mobile devices

The media queries were working correctly. Had an issue with the linking of my stylesheet. Thanks a lot for your answers! Won't delete this questions to keep the knowledge to the community

I'm struggling with my media queries. If I resize my browser window they work properly, but when I emulate mobile devices (IOS and Android) with the Google Chrome device emulator, they won't work.

@media (max-width: 650px)

Adding only a screen or a min-width doesn't change anything. The viewport tag is set.

Is there anything I need to know? Thanks a lot!

Upvotes: 0

Views: 1829

Answers (2)

Buddy Christ
Buddy Christ

Reputation: 1396

You should set the meta viewport tag in the html header:

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

And you could add !important to the media query rules to check if other rules are overriding them

Upvotes: 3

LeroyJenkFrettings
LeroyJenkFrettings

Reputation: 26

You can try this code:

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

Also, set a meta viewport tag in your HTML head component

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

Upvotes: 1

Related Questions