scontainer

What is scontainer?

.scontainer works wrapping your content in a safe area and maintains separation from the edge of the screen.

How to use

<div class="scontainer">
  <div class="line">
    <div class="x:scol-12">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
</div>

      

The following example removes the default padding using the Shido classes, assuming you need it you can remove, reduce or increase the padding of the container, but in most cases it will not be necessary.

<div class="scontainer x:pad-lr-0">
  <div class="line">
    <div class="x:scol-12">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
</div>

      

scontainer-liquid

.scontainer-liquid works in the same way a .scontainer, the difference is that it is not limited to the safe area, it occupies the entire width of the screen but maintains the same separation and properties as .scontainer

<div class="scontainer-liquid">
  <div class="line">
    <div class="x:scol-12">
      <nav>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </nav>
    </div>
  </div>
</div>