How to do media query of 576px forr landscape mode

I am trying to get my media query to work and I am confused because from one of my chrome extension, there are a few breakpoints to include but I read somewhere that the landscape max-width is 1020px? and the max width tablet is 992px? What is the 578px for because most of my mobile phones respond well to 468px?

The CSS media queries start like so:

@media only screen and (max-width: 576px) {
    /* put your CSS elements here */
}

However, 576px is some other phones’ max width.

thanks… .so i guess then from what I read, the tablet is max-width 992px portrait and the landscape is 1024px? Have you guys heard of Eurobiapanel?

I am also wondering why one of my positioning is not working? I tried to put a !important but it doesn’t move at all. Is there a way to see what could be overriding it?

I don’t know what is Eurobiapanel - and trying to search it on Google doesn’t return any result at all!

However, you can check the code to see what could be overriding the setting you put before.

how would I check the code? This is the only thing that doesn’t even move no matter which left or right I used

Try to move the element that doesn’t move in a div with a class name you decide, then stylize the div with class name.

But I have given the element a class and styled it but it just doesn’t work for one of my media queries

Try cleaning the mobile browser’s cookies and cache.

ok… I will try that… is there another way to move an image though? I have a donation paypal banner but it should work correct? It just doesn’t move for my last media query

It should work correctly… if you move the <img> tag on a div with class image, and then style the .image element.

so just to confirm that the 468px is more mobile phones portrait? what would be the media query for landscape? would I just type @media screen (468px) and (orientation: landscape){}? I thought that width would be wider for landscape?

You would type:

@media screen and (max-width: 468px and orientation: landscape) {
     /* your CSS elements design here */
}

but from stackoverflow, they put the orientation separately:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

This syntax from W3Schools is correct:

@media not|only mediatype and (mediafeature and|or|not mediafeature)  {
    /* CSS-Code */
}

min-device-width, max-device-width and -webkit-min-device-pixel-ratio are not correct on CSS3. So you would use:

@media only screen and (min-width:320px and max-width: 480px and orientation: landscape) {
       /* Your CSS Elements */
}

but from stackoverflow, they put (orientation: landscape) apart from (max-width)

I guess maybe both syntax should work… maybe there is more than one way to do it…do I need to use min-width? I have never used min-width in my media queries?

You can also remove the min-width:320px and portion of code.

so I can either just type

@media (max-width: 478px) and (orientation:landscape){} or

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

You can use my syntax for it:

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