Container

Overview

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


Usage

Below is a default container which you can use.

default container
<section class="sgds-section">
  <div class="sgds-container">
    default container
  </div>
</section>

Maximum width

You can reference the table below of sgds-container class behaviour at 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>

Additional Information

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