Latest web development tutorials

Grid Foundation - small devices

Suppose we have a simple grid layout on small devices, two, width ratio of 25% and 75%.

Tip: Define small device screen is less than 40.0625em .

We use small devices .small-* category.

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

The following examples set up two columns, the ratio was 25% and 75% (Foundation is mobile first: If not specified, the large equipment will inherit .small class code): .small in Them Those and use. "

Examples

<Div class = "row">
<Div class = "small-3 columns" style = "background-color: yellow;">
<P>? This tutorial </ p>
</ Div>
<Div class = "small-9 columns" style = "background-color: pink;">
<P>? This tutorial </ p>
</ Div>
</ Div>

try it"
Note Note: To ensure that the number of columns add up to 12!

If you need to set up 33.3% / 66.6% ratio, you can use .small-4 and .small-8 :

Examples

<Div class = "row">
<Div class = "small-4 columns" style = "background-color: yellow;">
<P>? This tutorial </ p>
</ Div>
<Div class = "small-8 columns" style = "background-color: pink;">
<P>? This tutorial </ p>
</ Div>
</ Div>

try it"