How to do media query of 576px forr landscape mode

Hosting Support
21

thanks

1 Like
22

how do you test the landscape in chrome? I guess i have to use the inspect element? I downloaded some breakpoints for chrome but it doesn’t have landscape testing

23

Yes, and change that to the responsive viewing mode with the relative resolution you want to test and the orientation.

24

So which mobile phone has the 578px?

25

I don’t know which mobile phone has 578px as width.

26

I am confused here because I have done a 1024px in lanscape mode and from my understanding, this is for tablet devices but how would I do a tablet for portrait? Is it still 1024 in portrait mode or is it 992 px? or is the 992 for tablet portrait?

27

According to one of the chrome extension, it looks like 992 is the portrait for a tablet… I just think that the portrait and landscape is confusing. So is looking at the inspect element the only way to test the landscape mode?

28

You can even test with your phone or tablet the two modes.

29

According to chrome inspect tool, the landscape for a tablet is 1024px and the portrait max-width is 768px . I also found that if I add the orientation, it doesn’t work at all and by doing the following will give me an error:

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

30

I think certain breakpoint chrome extensions are not accurate. They said that the 768 is a portrait for tablet but according to the chrome extension, 768 px is for tablet landscape and 1024 is for tablet portrait, is this correct?

31

For me it’s the opposite; 768 is for tablet portrait and 1024 is for tablet landscape.

32

I thought so too but according to the chrome extension, it looks like it is the other way around

tablet%20landscape
tablet%20landscape1015×809 25.8 KB

Isn’t a picture of a tablet in portrait mode? So, then what is the purposed of adding orientation:landscape if it doesn’t work?

33

Then revert the orientations of before.

34

I am confused…but in the picture, the 768 by 1024 looks like it is in portrait mode ?

35

Yes, it looks like it is in portrait mode.

36

also, I tried to move one of my div elements with left or right but it doesn’t move… is there another way around this? I tried with margin-left but it doesn’t look nice…

37

You can do that with style="text-align:right" or style="text-align:left" inside of the div opening tag.

38

but can you position that exactly? with numbers as well?

39

Yes. Use style="position:absolute;left:-xxxpx" or style="position:absolute;left:xxxpx" inside the div tag, where xxx can be overwritten with the number of pixels. Then on the elements inside the div tag design them with position:relative.

40

That is a good idea! Hopefully this will work because something is overriding my css code and I thought that by placing the !important should work but nope

1 Like