CODEWITHSUNDEEP
cssfirefox
Joe
Joe

Reputation: 4514

CSS "@media only screen" only triggers when I resize window?

I have the following code on this site (it's Github Pages so you can see the repo here):

@media only screen and (max-width: 600px) {
 img {width: 100%; 
  height: 100%; 
  margin: 0; 
  padding: 0;
 } 
 a.box {
  width: 100%;
  padding:14px 15px;
  font-size: 0.75em;
 }
}

On my mobile (iPhone 7 Plus), the screen width doesn't appear to be triggering:

enter image description here

Nor does it on Firefox's Responsive Design mode for iphone 7/8/9 Plus:

enter image description here

But If I make the firefox window one pizel bigger:

It suddenly works!

Additionaly - if I set my responsive browser window to exactly the same sizes as the iphone 6/7/8 - then it works fine. Which suggests that it's NOT the size - it's something about the iphone user-agent-string? Maybe?

enter image description here

What is going on and how to do I fix it?

Upvotes: 3

Views: 364

Answers (2)

Hossein Azizdokht
Hossein Azizdokht

Reputation: 1005

Add

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

in <head> tag of site and it is better set standard max-width:768px instead of 600px for media-query

Upvotes: 0

nullptr
nullptr

Reputation: 4484

You need to add a meta tag in the head, for the browser to handle viewport zooming correctly:

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

Without the meta tag, the page is rendered at a higher screen width and then shrunk down to fit the device width. Hence the media queries will never be triggered.

More information on this can be found here.

Upvotes: 6

Related Questions