Split Screen Layout

  •  

If you're using Reflex, just add a class "StripeSplit" to the blocks in sequence.

/* SPLIT SCREEN */
.StripeSplit {padding:0;color:var(--color-brand-primary);}
.StripeSplit .siteBounds {max-width:100%;width:100%;height:auto;}
.StripeSplit .TitanBlock {clear:none;width:50%;float:left;margin:0;position:relative;display: flex;align-items: center;}
.StripeSplit .TitanBlock > div {padding:3rem 0 3rem 15rem;max-width: 645px;}

/* ALTERNATING BACKGROUNDS AND IMAGES (with images always above text on mobile) */
.StripeSplit .TitanBlock:nth-child(odd){background:var(--color-light);}
.StripeSplit .TitanBlock:nth-child(4n-2), .StripeSplit .TitanBlock:nth-child(4n-3) {float: left;}
.StripeSplit .TitanBlock:nth-child(4n), .StripeSplit .TitanBlock:nth-child(4n-1) {float: right;}
.StripeSplit .TitanBlock:nth-child(4n) > div, .StripeSplit .TitanBlock:nth-child(4n-3) > div {padding:3rem 15rem 3rem 0;right:0;position:absolute;-webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);top:50%;}

/* Use matchheight.j or another method of height matching. Because of the absolute positioning, without matchheight.js, the text blocks will have no height. */






See this layout with "View More" sliding hidden content on the Quikclot Control + products page.

2

4

6

8

10

© 2017 Northwoods - all rights reserved.
top