Search code examples
cssmedia-querieslandscapeiphone-5

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.

Solution

  • 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