Full Width Landing Sections

The trouble with landing pages is that you need full width landing sections and need to explode out of the given margins and container widths. Here’s a code snippet that makes it easy. Insert these anywhere inside the content and they come to life. All you need to do is have one of the ancestors set up like so:

.ancestor {
overflow: hidden;
}

And here’s the code for full-width landing section.

.landing-section-full {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
box-sizing: border-box;
padding: 1.618em;
display: flex;
align-items: center;
justify-content: center;
clear: both; }

Leave a Comment