Menu icon Foundation
Tablet (iPad) Media Query in Foundation 5

Hi. I'm trying out Foundation 5. Looks like the media query breakpoints have changed.

Previously there was a breakpoint at min-width:768px.
That's gone, but I see one for min-width:40.063em (641px) .

Is there no direct built in support for targeting iPads now?

tabletbreakpointipadmediaqueries

Hi. I'm trying out Foundation 5. Looks like the media query breakpoints have changed.

Previously there was a breakpoint at min-width:768px.
That's gone, but I see one for min-width:40.063em (641px) .

Is there no direct built in support for targeting iPads now?


Rafi Benkual gave the most helpful answer for this post
Rafi Benkual about 5 years ago

The medium range is great for Ipads and similar tablets. That includes the breakpoints between 641 and 1024px.

$small-range: (0em, 40em); /* 0, 640px /
$medium-range: (40.063em, 64em); /
641px, 1024px /
$large-range: (64.063em, 90em); /
1025px, 1440px /
$xlarge-range: (90.063em, 120em); /
1441px, 1920px /
$xxlarge-range: (120.063em); /
1921px */

This post has been closed. No new replies can be added.

Rafi Benkual about 5 years ago

The medium range is great for Ipads and similar tablets. That includes the breakpoints between 641 and 1024px.

$small-range: (0em, 40em); /* 0, 640px /
$medium-range: (40.063em, 64em); /
641px, 1024px /
$large-range: (64.063em, 90em); /
1025px, 1440px /
$xlarge-range: (90.063em, 120em); /
1441px, 1920px /
$xxlarge-range: (120.063em); /
1921px */

Michael Oakley about 5 years ago

You're right! Looks like I need to add the medium-# classes onto my columns, and then they won't inherit the small grid.

Thank you, Rafi.