Foundation Grid - Medium Devices

In the previous chapter, we introduced the use of .small-* classes for small devices, with a grid ratio of 25%/75%:

<div class="small-3 columns">....</div>
<div class="small-9 columns">....</div>

For medium devices, we recommend a ratio of 50%/50%.

Note: The screen size for medium devices is defined between 40.0625em and 64.0624em.

Use the .medium-* classes for medium devices.

Now, let's add two columns for medium devices:

<div class="small-3 medium-6 columns">....</div>
<div class="small-9 medium-6 columns">....</div>

The above example sets up two columns with a ratio of 25% and 75% (Foundation is mobile-first: if not specified, large devices will inherit the .small class code):

The ratio used on small devices is 25%/75% (.small-3 and .small-9). However, the ratio used on medium devices is 50%/50% (.medium-6 and .medium-6).

Example

<div class="row">
  <div class="small-3 medium-6 columns" style="background-color:yellow;">
    <p>tutorialpro.org</p>
  </div>
  <div class="small-9 medium-6 columns" style="background-color:pink;">
    <p>tutorialpro.org</p>
  </div>
</div>

| | Note: Ensure the columns add up to 12! | | --- | --- |

Use Only on Medium Devices

In the following example, we specify the .medium-6 class (not .small-*). This indicates a 50%/50% ratio on medium or large devices. However, on small devices, it will stack horizontally (100% width):

Example

<div class="row">
  <div class="medium-6 columns" style="background-color:yellow;">
    <p>tutorialpro.org</p>
  </div>
  <div class="medium-6 columns" style="background-color:pink;">
    <p>tutorialpro.org</p>
  </div>
</div>