Use the sgds-container class to limit page elements to a reasonable maximum width based on the size of a user's screen.


Usage
default container
<section class="sgds-section">
  <div class="sgds-container">
    default container
  </div>
</section>
sgds-container class behaviour for different screen sizes
Screensize Container width
Desktop Maximum width of 960px
Widescreen Maximum width of 1152px
Full HD Maximum width of 1344px

To remove maximum width limitations but keep the 32px margin on both sides, add is-fluid.
fluid container
<section class="sgds-section">
  <div class="sgds-container is-fluid">
    fluid container
  </div>
</section>

The sgds-container class can be used in any context, but is especially useful as a direct child of:


Feedback

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

Chat with the team