Foundation Grid - Medium device


May 04, 2021 14:00 Foundation5


Table of contents


Foundation Grid - Medium device

In the previous section, we described how we set it up on small devices using .small-* with a grid scale of 25%/75%:

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

We recommend 50%/50% on medium-sized devices.

Tip: The screen size of a medium device is 40.0625em 64.0624em

The .medium-* devices.

Now let's add two columns to the medium device:

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

The above instances have two columns, 25% and 75% proportional (Foundation is mobile first: if no special instructions are given, code for the .small class is inherited on large devices):

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

Instance

< div class= "row" >
< div class= "small-3medium-6 columns" style= "background-color:yellow;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< div class= "small-9medium-6 columns" style= "background-color:pink;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< /div >

Try it out . . .
Foundation Grid - Medium device Note: To ensure that the number of columns adds up to 12 columns!

Use on medium-sized devices

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

Instance

< div class= "row" >
< div class= "medium-6columns" style= "background-color:yellow;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< div class= "medium-6columns" style= "background-color:pink;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< /div >

Try it out . . .