Media query 812px not working

Hosting Support
1

I just realised that the media query of max-width 812px is not working and it tends to stuff up my other media query. However, if I used media query of 512px, this also does move the 812px. So why do we need to use the 812px? I am so confused here and would like someone to clarify this for me. Whenever I am using 812px, it is affecting my 1024 media query but not 512px. Also when using the 512px, it does move the 812px

2 
@media only screen and (max-width : 812px) {
// your code here 
}

The above media query will effect the width less than or equal to 812px and if you use

@media only screen and (min-width : 812px) {
// your code here 
}

Then it will effect the width greater than or equal to 812px.

3

I have used the former but it still affected my media query of 1024px

4

My other question is that, how come the 512px also tends to move the 812px? For some reason, if I do a max-width of 512px, it will also affect the iphone x

5

Because iphone x width is 375px according to chrome which is less than 512px. So, if you don’t create any media query for 375px width then media query of 512px will be used for it.

6

So are the following breakpoints wrong?

It says that the iphone x width is 812px

7

Right click on the element and open inspect element check from their if you see css for media query of width 812px. If not then it is not effecting your media query of 1024px.

8

i doubt those breakpoints are for landscape mode not for portrait mode because the width for iphone x is 812px in only landscape mode not in portrait mode.

9

I am still confused here because in the chrome extension, it says that the 812 and 1024 are for height and not for width…According to the chrome extension, the 768 width and 1024 height is for tablet portrait…

10

for me in chrome in portrait mode it shows 375px width and 812px height for iphone x

and in landscape mode it shows 812px width and 375px height for iphone x.

The one you mentioned is using landscape orientation not portrait.

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
11

thanks and maybe that was causing the problem and I guess the 512px is a common breakpoint for mobile phones?

1 Like
12

No Problem

13

I am using MaterializeCSS Framework and in it i found that 600px is a common breakpoint for mobile phones

14

so how would I do a landscape mode for the 512pixel? would it be:

@media screen and (max-width: 512px) and (orientation: landscape){}

15

yes

@media only screen and (max-width: 512px) and (orientation: landscape) {}
16

thanks!

1 Like
17

No Problem

18

But according to that website, it also mention that the portrait is as follows:

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
19

but I still don’t understand why it is making my tablet 1024 max-width looking weird…

20

But chrome extension seems to respond better if I use 512px as a break point instead of 812