Container
Our entire design is held in place with the .container class. We use the container to possess the elements of our design within a specific width, and also adjust the width at specific breakpoints so as to provide compatibility for mobile devices.
Here is a breakdown of the width of the .container class at various viewports:
| Extra Large ≥ 1280px |
Large ≥1120px |
Regular ≥ 960px |
Small ≥ 768px |
Extra Small ≤ 768px |
|
|---|---|---|---|---|---|
| Width | 1140px | 960px | 768px | 620px | 90% |
If you wish to change any of the widths, you can do so by modifying the responsive() mixin inside the /layout/_container.scss file.