EverWeb Widgets

Responsive Grid Module - Text Overlap Graphic

Responsive Grid Overlap

This text block overlapping the graphic is created using a responsive grid layout.
The grid is 8 columns wide. The image starts at column 3 and spans 6 columns.
The text starts at column 1 and spans 4 columns. Its align-self property is set to center so that it is vertically aligned in the center and it has a margin of 20 px to inset it slightly to allow room for the box shadow.
If the align-self property is set to "start" the text will move to the top and if set to "end" it will move to the bottom. The text area can occupy the full height if the align-self property is set to "auto"

Responsive Grid Overlap

This text block overlapping the graphic is created using a responsive grid layout.
The grid is 8 columns wide. The image starts at column one and spans 6 columns.
The text starts at column 5 and spans 4 columns. Its align-self property is set to center so that it is vertically aligned in the center and it has a margin of 20 px to inset it slightly to allow room for the box shadow.
If the align-self property is set to "start" the text will move to the top and if set to "end" it will move to the bottom. The text area can occupy the full height if the align-self property is set to "auto"