Responsiveness

Overview

Use responsive classes to define how the grid behaves at different screen sizes.

Breakpoints

Under the grid system, each column's width can be defined for a specific viewport size: mobile, tablet, desktop, widescreen and fullhd.

Class (x can take values between 1 and 12)	Breakpoint
`is-x-mobile`	Up to 768px
`is-x-tablet`	Between 768px to 1023px
`is-x-desktop`	Between 1024px to 1215px
`is-x-widescreen`	Between 1216px to 1407px
`is-x-fullhd`	1408px and above

Resize the browser to see how the columns respond to different screen sizes
Learn more about the grid system

is-11-mobile
is-7-tablet
is-5-desktop
is-3-widescreen
is-1-fullhd

Col

<div class="sgds-container">
  <div class="row is-mobile">
    <div class="col is-11-mobile is-7-tablet is-5-desktop is-3-widescreen is-1-fullhd">
      <br />
      <code>is-11-mobile</code><br>
      <code>is-7-tablet</code><br>
      <code>is-5-desktop</code><br>
      <code>is-3-widescreen</code><br>
      <code>is-1-fullhd</code>
    </div>
    <div class="col">Col</div>
  </div>
</div>

Mobile Columns

By default, columns col are stacked on top of each other on mobile. To have columns displayed in a row on mobile, add the is-mobile class to the row container:

<div class="sgds-container">
  <div class="row is-mobile">
    <div class="col">1</div>
    <div class="col">1</div>
    <div class="col">1</div>
    <div class="col">1</div>
  </div>
</div>

To display columns only on desktop (1024px) and above, add the is-desktop class on the row container:

<div class="sgds-container">
  <div class="row is-desktop">
    <div class="col">1</div>
    <div class="col">1</div>
    <div class="col">1</div>
    <div class="col">1</div>
  </div>
</div>

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team