Ovelapping Contentwith Sections Pro

Making the overlap

Sections allows us to overlap content in two ways.

This page describes the use of the powerful Custom Margins feature in Sections pro which allows us to create responsive overlaps on all sorts of elements.

You can also see it in action on the homepage of this project. The page content is overlapped over the bottom of the graduated header image, smoothing the transition between the header and the page content. The effect is subtle but looks much more polished that a conventional layout.

For single pieces of overlapping content we can use the responsive Sections Fix stack. You can see how to use Sections Fix here

How its done

Sections has a custom Margins control that allows us to responsibly control the position of the top each stack on your page.

In this example we a making a Pillar type arrangement using a Grummage 1column stack to contain the content to the site width.

The page background is pale blue and we have used the Grummage column background color to apply the white pillar color.

In order to overlap the Section on the header image we simply need to apply a negative margin. The trick is to make this margin proportional so that it looks good as the screen width is changed.

Remember, with Sections custom responsive margins that you can define both a mobile margin and also separate mobile units. Test your design and find out which works best with the size of your header and position of your main content.

Anatidae paleo gastropro authentic flexitarian fixie tote bag, scenester Chordate sweater irony locavore. Gentrify Aves Ayelsbury craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard mallards fap Terry Richardson XOXO. Sartorial vinyl passion, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Eider trust fund, grummage craft beer biodiesel Wes Anderson hashtag Intelligentsia hoodie. Ethnic DIY 8-bit, paddles ennui narwhal Tumblr platyrhynchos Helvetica asymmetrical fap twee viral 90's aesthetic. Blue Bottle kale chips hashtag, jean shorts disrupt semiotics wayfarers pop-up aesthetic retro kogi Tumblr put a bird up it.