Latest web development tutorials

Grid Foundation - Medium Equipment

The last chapter we introduced small devices we use .small-* class to set the grid ratio of 25% / 75%:

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

On medium-sized device that we recommend a ratio of 50% / 50%.

Tip: The screen size is defined in the medium-sized equipment 40.0625em to 64.0624em between.

Medium-sized equipment .medium-* category.

Now we add two on a midrange device:

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

? In the instance 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):

The proportion of small devices% 25/75% ( .small-3 and .small-9 ). However, the proportion of medium-sized equipment used was% 50/50% ( .medium-6 and .medium-6 ).

Examples

<Div class = "row">
<Div class = "small-3 medium-6 columns" style = "background-color: yellow;">
<P> This tutorial </ p>
</ Div>
<Div class = "small-9 medium-6 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!

Tight device for use on medium-sized

The following example, we specify .medium-6 class (not .small-* ). This indicates that in the medium or large equipment ratio of 50% / 50%. But on a small device horizontally stacked (100% width):

Examples

<Div class = "row">
<Div class = "medium-6 columns" style = "background-color: yellow;">
<P> This tutorial </ p>
</ Div>
<Div class = "medium-6 columns" style = "background-color: pink;">
<P> This tutorial </ p>
</ Div>
</ Div>

try it"