Explain fullhd container

This commit is contained in:
Jeremy Thomas 2017-03-15 21:03:38 +00:00
parent 10dfb6eac3
commit 292faa1586

View File

@ -23,10 +23,14 @@ doc-subtab: container
<li><code>.section</code></li>
<li><code>.footer</code></li>
</ul>
<p>On <strong>mobile</strong> and <strong>tablet</strong>, the container will have a margin of <strong>20px</strong> on both the left and right sides.</p>
<p>On <strong>desktop</strong> (>= 1000px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
<p>On <strong>widescreen</strong> (>= 1192px), the container will have a maximum width of <strong>1152px</strong>.</p>
<p>The values <strong>960</strong> and <strong>1152</strong> have been chosen because they are divisible by both <strong>12</strong> and <strong>16</strong>.</p>
<p>This is how the container will behave:</p>
<ul>
<li>on <strong>mobile</strong> and <strong>tablet</strong>, it will have a margin of <strong>20px</strong> on both the left and right sides.</li>
<li>on <strong>desktop</strong> (>= 1000px), it will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</li>
<li>on <strong>widescreen</strong> (>= 1192px), it will have a maximum width of <strong>1152px</strong>.</li>
<li>on <strong>fullhd</strong> (>= 1384px), it will have a maximum width of <strong>1344px</strong>.</li>
</ul>
<p>The values <strong>960</strong>, <strong>1152</strong> and <strong>1344</strong> have been chosen because they are divisible by both <strong>12</strong> and <strong>16</strong>.</p>
</div>
</div>