There are a couple of helpers built in to Snowfire to make it simple to keep the same content width and breakpoints throughout blocks.
You can add the container class to a <div> in a block to set a max width, center the content and add default paddings.
<div class="echo-container-xs">I'm 430px wide</div>
<div class="echo-container-sm">I'm 730px wide</div>
<div class="echo-container-md">I'm 1170px wide</div>
<div class="echo-container-lg">I'm 1440px wide</div>
Most default blocks are using the md size, and the sm size for text content. We recommend starting of with <div class="echo-container-md"></div>
When writing CSS you can use our breakpoint helper when you want a different behaviour on a certain screen size.
h1 {
font-size: 36px;
@include echo-breakpoint-down(xs) {
font-size: 16px;
}
}
The code above will set font-size to 16px when a device has a screen smaller than 567px.