Containers Layout
Containers are a simple design element to center your content horizontally. By default a container maintains margins on the sides to maintain an adequate proportion, however this can be eliminated.
The containers can be used in any context, as a parent or as a direct child of any of the elements.
Responsive breakpoints
The containers are intervened in some points of the viewport to provide a better experience and spacing. We use the following breakpoints for each type of device.
In smartphones from 320px to 767px: width : 92.50%; Uses 92.50% of the total width of the viewport.
In tablets from 768px to 1023px: max-width : 720px; the container will have a maximum width of 720px.
In Desktop from 1024px to 1366px: max-width : 976px; the container will have a maximum width of 976px.
In Desktop-plus from 1366px and up: max-width : 1366px; the container will have a maximum width of 1366px.
See example in a window
Header
Main
Aside
<div class="e-container">
<!-- Content here -->
</div>Fluid container
Use .e-container-fluid for a full width container, spanning the entire width of the viewport.
See example in a window
Header
Main
Aside
<div class="e-container-fluid">
<!-- Content here -->
</div>
Section container
A simple container that adds a space to divide your page into sections. Recommended use accompanied by a fluid or spaced container.
Use .e-section
See example in a window
<div class="e-container">
<div class="e-section">..1</div>
<div class="e-section">..2</div>
</div>
<!-- or -->
<div class="e-container-fluid">
<div class="e-section">..1</div>
<div class="e-section">..2</div>
</div>Box container
A simple container that adds a space to divide your page into sections.
Use .e-box
<div class="e-box">
...
</div>
