<h1>Using Max Width</h1>
<div class="full">
<h2>Just Max Width, No Gutter</h2>
<p>This will touch the sides with no gutter on smaller screens.</p>
<p>Lorem ipsum dolor sit amet, oblique patrioque eum no, debet habemus minimum an mea. Eu has esse prima, in falli veritus sea. Pri ea primis labitur consulatu. Nam ei assum alterum.</p>
<p>Te solum illum nec. Ea scripta scaevola liberavisse mel, et mucius bonorum democritum eum. An ius alii apeirian percipitur, at vide pertinax mel. Eam at hinc iriure consequuntur, ad eam alienum scribentur.</p>
<p>Ut sea dictas tacimates. Quo eu veri debitis. Et sit aliquam civibus delicata, vim cu iuvaret scaevola quaerendum, reque nostrum voluptua pri ut. Et eam eligendi invenire, solum nostrud complectitur ei cum. Ne his malis rationibus, dicat tation eleifend
ut duo.</p>
</div>
<main class="margin">
<div>
<h2>With a Margin Gutter</h2>
<p>Here I apply a fixed size margin to the containing element for a gutter on small screens, not this element itself and leave this with auto margins to centre.</p>
<p>Lorem ipsum dolor sit amet, oblique patrioque eum no, debet habemus minimum an mea. Eu has esse prima, in falli veritus sea. Pri ea primis labitur consulatu. Nam ei assum alterum.</p>
<p>Te solum illum nec. Ea scripta scaevola liberavisse mel, et mucius bonorum democritum eum. An ius alii apeirian percipitur, at vide pertinax mel. Eam at hinc iriure consequuntur, ad eam alienum scribentur.</p>
<p>Ut sea dictas tacimates. Quo eu veri debitis. Et sit aliquam civibus delicata, vim cu iuvaret scaevola quaerendum, reque nostrum voluptua pri ut. Et eam eligendi invenire, solum nostrud complectitur ei cum. Ne his malis rationibus, dicat tation eleifend
ut duo.</p>
</div>
</main>
<div class="percent">
<h2>With a Percent Gutter</h2>
<p>This has a gutter defined by a percentage width to get a slimmer gutter on smaller screens.</p>
<p>Lorem ipsum dolor sit amet, oblique patrioque eum no, debet habemus minimum an mea. Eu has esse prima, in falli veritus sea. Pri ea primis labitur consulatu. Nam ei assum alterum.</p>
<p>Te solum illum nec. Ea scripta scaevola liberavisse mel, et mucius bonorum democritum eum. An ius alii apeirian percipitur, at vide pertinax mel. Eam at hinc iriure consequuntur, ad eam alienum scribentur.</p>
<p>Ut sea dictas tacimates. Quo eu veri debitis. Et sit aliquam civibus delicata, vim cu iuvaret scaevola quaerendum, reque nostrum voluptua pri ut. Et eam eligendi invenire, solum nostrud complectitur ei cum. Ne his malis rationibus, dicat tation eleifend
ut duo.</p>
</div>
<p><a href="https://www.sitepoint.com/community/t/horizontal-mobile-phone-view/269052?u=sama74">https://www.sitepoint.com/community/t/horizontal-mobile-phone-view/269052?u=sama74</a></p>
body {
background: #999;
font-family: sans-serif;
margin: 0;
}
div {
background: #fff;
border-radius: 1em;
margin: 1em auto;
padding: 1.6em;
max-width: 50em;
box-sizing: border-box;
}
.margin {
margin: 1em;
}
.percent {
width: 90%;
}
div p:first-of-type {
color: #d00;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.