Menu icon Foundation
Foundation 5.4.0 iphone 6 issue

I can't get the medium styles to work on iphone 6 landscape view, it keeps going to small styles. I changed the screen widths and it works when I look at it in an online responsive viewer but not on an actual iphone. Has anyone else run into this problem? I am attaching my foundation.css code as well.

meta.foundation-version {
  font-family: "/5.4.6/"; }

meta.foundation-mq-small {
  font-family: "/only screen/";
  width: 0em; }

meta.foundation-mq-medium {
  font-family: "/only screen and (min-width:660px)/";
  width: 660px; }

meta.foundation-mq-large {
  font-family: "/only screen and (min-width:64.063em)/";
  width: 64.063em; }

meta.foundation-mq-xlarge {
  font-family: "/only screen and (min-width:90.063em)/";
  width: 90.063em; }

meta.foundation-mq-xxlarge {
  font-family: "/only screen and (min-width:120.063em)/";
  width: 120.063em; }

meta.foundation-data-attribute-namespace {
  font-family: false; }

            

         

iphone 6responsive issueshowing incorrect styles

I can't get the medium styles to work on iphone 6 landscape view, it keeps going to small styles. I changed the screen widths and it works when I look at it in an online responsive viewer but not on an actual iphone. Has anyone else run into this problem? I am attaching my foundation.css code as well.

meta.foundation-version {
  font-family: "/5.4.6/"; }

meta.foundation-mq-small {
  font-family: "/only screen/";
  width: 0em; }

meta.foundation-mq-medium {
  font-family: "/only screen and (min-width:660px)/";
  width: 660px; }

meta.foundation-mq-large {
  font-family: "/only screen and (min-width:64.063em)/";
  width: 64.063em; }

meta.foundation-mq-xlarge {
  font-family: "/only screen and (min-width:90.063em)/";
  width: 90.063em; }

meta.foundation-mq-xxlarge {
  font-family: "/only screen and (min-width:120.063em)/";
  width: 120.063em; }

meta.foundation-data-attribute-namespace {
  font-family: false; }

            

         
Rafi Benkual over 4 years ago

Hi Laura
We need to know what iphone you are testing with, the reg or +.

Here are the efective px widths
iPhone 6: 375px (portrait), 667px (landscape)
iPhone 6 Plus: 414 (portrait), 736px (landscape)

On the Foundation Docs the medium gris renders properly in landscape.

Originally, the media query was defined as:
CSS
meta.foundation-mq-medium {
font-family: "/only screen and (min-width:40.063em)/";
width: 40.063em; }

If you revert back to this, does it work the way you expected?
Why did you switch it to px?

PS: I removed most of your CSS file as it is unnecessary and too long.