Posts in current category
May 04, 2021 14:00 Foundation5
In the previous section, we described how we set it up on small devices using
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.
screen size of a medium device is
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%
However, the percentage used on medium-sized devices is 50%/50%
|Note: To ensure that the number of columns adds up to 12 columns!|
In the following example, we specify
his indicates a 50%/50% ratio on medium or large devices.
However, it is stacked horizontally (100% width) on small devices: