Hi. How can we help?

Multiple screen sizes

13 Mar 2018 in: Grid System

Handling layout changes for multiple screen sizes is as simple as adding a few more classes to your markup.

Available Classes:

screen- tablet- mobile- phone-

<div class="row double-gutters">
  <div class="columns screen-60 tablet-50 mobile-40 phone-100">
  ...
  </div>
  <div class="columns screen-40 tablet-50 mobile-60 phone-100">
  ...
  </div>
</div>

To set the width of a grid column just add the desired width percentage class for the targeted breakpoint:

screen-50 mobile-100

...

...