Overriding paragraph font size in Zurb Foundation for iPad

Question

Using Foundation/SASS I'm trying to find a way to override the paragraph font size just for the iPad in landscape orientation.

In Foundation's _settings.scss file I'm trying to use the media query below, but it seems no matter what is in query itself it's being skipped over and uses the latter setting.

Created this media query (but none seem to work inside _settings.scss):

$ipad-landscape: "only screen and (min-width: 1224px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)";

A few lines down I then tried to override the $paragraph-font-size:

$paragraph-font-size: emCalc(16px);

@media #{$ipad-landscape} {    
    $paragraph-font-size: emCalc(12px);
}

I tried this approach in an additional custom scss file (extras.scss):

@media #{$ipad-landscape} {

 p { font-size: emCalc(12px) !important; }

}

I then tried to nest the media query in the tag in extras.scss which works:

p { 
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      font-size: 12px !important;
  }
}

When I try to add min-width,min-device-width, or orientation it breaks again:

p { 
  @media only screen and (min-width: 1000px) and (-webkit-min-device-pixel-ratio: 2) {
      font-size: 12px !important;
  }
}

Answer 1

There are several considerations:

1) All iPads' browsers think that their screen resolution is 768x1024.

In your original media query you have min-width: 1224px which will never match any iPad.

2) SASS expressions are executed regardless of whether they are wrapped into media queries or not. SASS knows nothing about which resolution the resulting CSS will be viewed at, so this code:

@media #{$ipad-landscape} {    
    $paragraph-font-size: emCalc(12px);
}

is senseless and is equivalent to just $paragraph-font-size: emCalc(12px);.

You have to put some CSS declarations inside media queries so that they will be evaluated by a browser.

3) I don't own an iPad so i can't test, but your last media query @media only screen and (min-width: 1000px) and (-webkit-min-device-pixel-ratio: 2) looks solid to me. It should match in landscape only.