There are a couple of helpers built in to Snowfire to make it simple to keep the same content width and breakpoints throughout blocks.
Container
Users can apply container classes to divs with these specifications:
Class | Width |
| 430px |
| 730px |
| 1170px |
| 1440px |
> Recommendation: Most default blocks are using the md size, and the sm size for text content.
Example
<div class="echo-container-md">
<sf-text id=":1"></sf-text>
</div>
Breakpoints
CSS breakpoint helper using SCSS syntax:
.my-class {
display: flex;
@include echo-breakpoint-down(xs) {
display: block;
}
}
Breakpoint Sizes
Breakpoint | Width | Device |
| 567px | Phones |
| 768px | Portrait tablets |
| 992px | Landscape tablets |
| 1200px | Laptops |