Foundation Grid - Medium device
May 04, 2021 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= "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 . . .
|
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= "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 . . .