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:
Can't find a component?
Let us know what you need and we’ll be happy to look into it