Landscape mode doesn't work. Media queries

Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Wed Oct 22, 2014 3:00 pm
Reply with quote
Report this post
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?
User avatar
Junior Boarder

GK User
Wed Oct 22, 2014 3:36 pm
Reply with quote
Report this post
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.
User avatar
Moderator

GK User
Wed Oct 22, 2014 5:33 pm
Reply with quote
Report this post
Cyberek wrote: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.
Image
User avatar
Junior Boarder

GK User
Thu Oct 23, 2014 12:37 pm
Reply with quote
Report this post
I solved it.
User avatar
Junior Boarder

GK User
Mon Oct 27, 2014 7:26 am
Reply with quote
Report this post
What was the problem?
User avatar
Moderator


cron