Landscape mode doesn't work. Media queries

Hi.

I have added this code (.topheader) to mobile.css

Code: Select all

@media only screen and (max-width: 320px) and, only screen and (max-device-width: 320px) and (-moz-max-device-pixel-ratio: 1.5), only screen and (max-device-width: 320px) and (-o-max-device-pixel-ratio: 1.5/1), only screen  and (max-device-width: 320px) and (-webkit-max-device-pixel-ratio: 1.5), only screen and (max-device-width: 320px) and (max-device-pixel-ratio: 1.5), only screen and (max-device-width: 640px) and (-moz-min-device-pixel-ratio: 2), only screen and (max-device-width: 640px) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-device-width: 640px) and (min-device-pixel-ratio: 2) {
   #gkMainbody table {
      width: 260px!important;
   }
.topheader { display:none!important; }
}

@media only screen and (max-width: 480px) and (orientation:landscape), only screen and (max-device-width: 480px) and (-moz-max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 480px) and (-o-max-device-pixel-ratio: 1.5/1) and (orientation:landscape), only screen  and (max-device-width: 480px) and (-webkit-max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 480px) and (max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 960px) and (-moz-min-device-pixel-ratio: 2) and (orientation:landscape), only screen and (max-device-width: 960px) and (-o-min-device-pixel-ratio: 2/1) and (orientation:landscape), only screen and (max-device-width: 960px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape), only screen and (max-device-width: 960px) and (min-device-pixel-ratio: 2) and (orientation:landscape) {
   #gkMainbody table {
      width: 420px!important;
   }
.topheader { display:none!important; }
}


It works fine in portrait mode on my sony xperia z1 and coworkers iphones but when we tilt the phone, to landscape mode, it doesn't work. Not in chromes devtools either. It there more css files I have to edit?

This is way to complicated. Why not use a simple query:

Code: Select all

@media (max-width: 640px) {}


Also some phones landscape is tricky as their height may vary, so targeting only landscape is not easy. Above will work for all screens that presents pixel width smaller than 640px.

This is way to complicated. Why not use a simple query:

Code: Select all

@media (max-width: 640px) {}


Also some phones landscape is tricky as their height may vary, so targeting only landscape is not easy. Above will work for all screens that presents pixel width smaller than 640px.

Yeah. That @media code was already in the templates css file, I just added my own class with css in it. Your code doesn't work either.
At 541px the unwanted pics start to show up in chrome devtools.

I solved it.

What was the problem?