Media query 812px not working

[piano0011]

is it because I didn’t add any min-width? Maybe because I didn’t add any min-width to my tablet of 1024, it might have been confused?

[MAHOfficial]

@piano0011

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

That can’t be correct.

@piano0011

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

Are you able to find 812px media query on 1024 width if not then 812px media query is not causing problem.

@piano0011

is it because I didn’t add any min-width? Maybe because I didn’t add any min-width to my tablet of 1024, it might have been confused?

No, min-width states the minimum width like if you want to use media query for only tablet and don’t want that media query to effect desktop computers then you will use max-width and if you also don’t want that media query to effect mobile devices then you will use min-width to state the minimum width so that it won’t effect the devices with the width less than min-width

[piano0011]

I guess I should really use min-width, so that it won’t affect my mobile phones… thanks for clearing that up but at least now I know that for most mobile phones, it should be be a max-width of 512px

[MAHOfficial]

To be honest i am not using min-width and just using max-width
when i have to overwrite code for some device then i use it’s max-width and i don’t ever have any conflicts in doing that

@piano0011

but at least now I know that for most mobile phones, it should be be a max-width of 512px

maybe but the framework that i am using is MaterializeCSS and in it i found that small (mobile devices) width starts from 600px

[piano0011]

i guess the best way is to use a real phone to test it if we are lucky enough to have that particular phone

[MAHOfficial]

lol, i don’t think we will have a that particular phone.

Here is some suggestion for you
Instead of checking it for different dimensions of tab and mobile try selecting responsiveness opton and decreasing the width and then check if anything is broken. If you found anything broken on that particular width then fix it by using media query for that width.

[piano0011]

thanks but it is annoying when I have found some wrong information on the web… It doesn’t sound right too that a max-width is 812 for a mobile phone as this is almost 1024…and most websites do not mention that we should use 812 as it can cause problem I think… I think the 812 iphone x is not easy to apply css. I guess if this is true, then i should stick with the 512px to make it easier…

[MAHOfficial]

@piano0011

max-width is 812 for a mobile phone

maybe it’s for landscape mode

@piano0011

I think the 812 iphone x is not easy to apply css

It is easy to apply css to any media query and i think instead of using max-width or min-width you can also use max-height and min-height (I haven’t used max height or min height) but they work the same way as max-width or min-width. You just have to specify the height in them for which you want to add css.

Maybe this might help more regarding max-height
https://www.w3schools.com/cssref/pr_dim_max-height.asp

[piano0011]

thanks again and I hope that the 512px will work for most phones like the Samsung note

[MAHOfficial]

@piano0011

thanks again

No Problem

@piano0011

I hope that the 512px will work for most phones like the Samsung note

Maybe