CODEWITHSUNDEEP
cssmedia-querieslandscapeiphone-5
Tag Grafx
Tag Grafx

Reputation: 35

Media Queries Not Working for Tablets and Landscape Phones like iPhone 5s

I'm trying to add a separate mobile nav menu to my site for tablets all the way down to phones. For some reason, the green menu shows up 50% across the width of my iPhone 5 when using landscape view only and on some tablets. The open icon doesn't appear, just the closed icon and it functions as both open & close button for some strange reason. It works great on my 2 laptops (1024x768 and 1440x960), 1 desktop (1920x1080), 1 iPhone 5s (640×1136 portrait view ONLY), and iPad (its my brothers so not sure the screen resolution, but he said it looked fine). I even have a viewport setup...

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

I've tried every media query I could think of from ratios, resolutions, max and min widths, max and min device widths, etc. If its not a @media query issue, it's got to be a separate css conflict, but I can't figure it out. There is no width or margin or position making this mobile menu show up, that I can see.

I tried to target iPhone 5 specifically and iPhone 5 landscape, just to try to figure out one screen size problem at a time, but nothing works. I've looked through my css and can't figure out what I'm missing. Currently, I went back to my original attempt of...

#mobilefix {
   display:none;
}
@media screen and (max-width : 854px) {
   #mobilefix {
      display:block;
   }
}

Here is my testing site: http://www.taggrafx.com/testing/ChowCzar/index.html#1

Thanks in advance for any help! I'm on the verge of giving up.

Upvotes: 1

Views: 720

Answers (2)

quw
quw

Reputation: 2854

Your problem stems from you transforming your menu 320px to the left:

.menu-wrap {
    transform: translate3d(-320px,0,0);
}

This means that when the screen width is >320px, but less than your mobile/desktop breakpoint, the menu will appear 320px from the right edge.

Instead of hardcoding the iPhone screen width, try using a percentage based transform:

.menu-wrap {
    transform: translate3d(-100%,0,0);
}

With the new styles this is what it looks like:

enter image description here

Upvotes: 2

fauverism
fauverism

Reputation: 1992

Try...

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">

#mobilefix {
   display:none;
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
   #mobilefix {
      display:block;
   }
}

Upvotes: 0

Related Questions