Show Sections Hide Sections

Breakout


What is a page breakout?

All of our web pages' content is wrapped within a page container that is 1280px wide. This means on that the padding on the sides of the pages grows as your screen gets larger than 1280px. Sometimes we want our content to flow outside of this container, to do this we give a <div> a class of breakout. Breakout <div>s will stretch from edge to edge of the page reguardless of page size.


Breakout Example

<div class='breakout' style='background-color:red;color:white;padding:16px;height:400px'>
  <p>This is a breakout</p>
</div>
Results:

This is a breakout