CODEWITHSUNDEEP
javascripthtmlcss
Harsh
Harsh

Reputation: 234

min-width in media query is not working as it should be

So i tried to create a mobile first display but when i used media query with min-width(which is supposed to say : when device width is at least or equal to the specified width then apply the specified styles) but whole display for mobile also broke and it also got applied with the min-width styles.

 @media only screen and (min-width: 700px){
    body{
        font-size: 1.8rem;
    }
    #hamburger{
        display: none;
    }
    nav ul{
        display: flex;
        justify-content: space-around;
    }
}

In this first image i removed media query and this is what i get image when i remove media query

In this second image i added media query which didn't work well second image

Here's full code on codepen : https://codepen.io/Harsh_X/pen/mdVEORY

Upvotes: 0

Views: 647

Answers (1)

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20954

Don't forget to add the viewport meta tag. Without it devices with high pixel densities, like the iPhone 6 and up, will be rendered differently without accounting for the characteristics of the screen. Those devices tell you that they have a width of 375 pixels, but the actual resolution of the screen is the double of that: 750 pixels. That is because the device has a pixel ratio of 2 or higher. So all the numbers are doubled (or more) in reality.

So your media query sees that the device has 750 pixels in width, but they are rendered in 375 pixels, which is confusing, and therefor will trigger the media query at 700 pixels.

The meta tag here below corrects these values. A more detailed explanation can be found on this article on MDN, which explains why a single pixel is really not a single pixel.

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

Upvotes: 4

Related Questions