All Elements Test Page – Base CSS for comparison
This is a heading Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique purus eu augue varius porttitor. In at nibh vitae quam commodo faucibus. Fusce euismod massa nec consequat sodales. Curabitur pharetra vehicula dolor, a tincidunt urna accumsan quis. Vestibulum justo orci, eleifend id scelerisque at, consequat in nibh. Donec dictum aliquet feugiat. Nullam viverra interdum eros, et vehicula tortor venenatis eu. Integer volutpat hendrerit enim eu pellentesque.
Example of a column layout
This is an example of an image on the left and text on the right. The image’s width is always constrained to it’s allotted column space, even if the image is very wide. On mobile, this will break to a single column with the image centered on top and the text following.
Here’s the same layout but reversed. Note how in this case, when the content breaks to mobile, the image still goes on top. This is controlled through the classes applied to the divs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique purus eu augue varius porttitor.
If you use landscape photos and portrait photos in the same layout, the effect can be a little jarring as the portrait photos appear so much bigger than the landscape ones. This could be avoided by using only photos of the same orientation, or by editing the portrait photo in Photoshop to be smaller; if you choose the latter though, it won’t look very good on mobile.
This is a heading Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique purus eu augue varius porttitor. In at nibh vitae quam commodo faucibus. Fusce euismod massa nec consequat sodales. Curabitur pharetra vehicula dolor, a tincidunt urna accumsan quis. Vestibulum justo orci, eleifend id scelerisque at, consequat in nibh. Donec dictum aliquet feugiat. Nullam viverra interdum eros, et vehicula tortor venenatis eu. Integer volutpat hendrerit enim eu pellentesque.
This is a heading Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique purus eu augue varius porttitor. In at nibh vitae quam commodo faucibus. Fusce euismod massa nec consequat sodales. Curabitur pharetra vehicula dolor, a tincidunt urna accumsan quis. Vestibulum justo orci, eleifend id scelerisque at, consequat in nibh. Donec dictum aliquet feugiat. Nullam viverra interdum eros, et vehicula tortor venenatis eu. Integer volutpat hendrerit enim eu pellentesque.
This is just bold text Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique purus eu augue varius porttitor. In at nibh vitae quam commodo faucibus. Fusce euismod massa nec consequat sodales. Curabitur pharetra vehicula dolor, a tincidunt urna accumsan quis. Vestibulum justo orci, eleifend id scelerisque at, consequat in nibh. Donec dictum aliquet feugiat. Nullam viverra interdum eros, et vehicula tortor venenatis eu. Integer volutpat hendrerit enim eu pellentesque.
This is a heading Lorem Ipsum Dolor Sit Amet
This section demonstrates a reflowing text-only two column layout. The columns will adjust their height to evenly distribute any amount of text between them, and break to a single column on mobile. Think of it like columns in a newspaper. Aenean tristique purus eu augue varius porttitor. In at nibh vitae quam commodo faucibus. Fusce euismod massa nec consequat sodales. Curabitur pharetra vehicula dolor, a tincidunt urna accumsan quis. Vestibulum justo orci, eleifend id scelerisque at, consequat in nibh. Donec dictum aliquet feugiat. Nullam viverra interdum eros, et vehicula tortor venenatis eu. Integer volutpat hendrerit enim eu pellentesque.
This is a heading Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique purus eu augue varius porttitor. In at nibh vitae quam commodo faucibus. Fusce euismod massa nec consequat sodales. Curabitur pharetra vehicula dolor, a tincidunt urna accumsan quis. Vestibulum justo orci, eleifend id scelerisque at, consequat in nibh. Donec dictum aliquet feugiat. Nullam viverra interdum eros, et vehicula tortor venenatis eu. Integer volutpat hendrerit enim eu pellentesque.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique purus eu augue varius porttitor. In at nibh vitae quam commodo faucibus. Fusce euismod massa nec consequat sodales. Curabitur pharetra vehicula dolor, a tincidunt urna accumsan quis. Vestibulum justo orci, eleifend id scelerisque at, consequat in nibh. Donec dictum aliquet feugiat. Nullam viverra interdum eros, et vehicula tortor venenatis eu. Integer volutpat hendrerit enim eu pellentesque.
This is the normal left sidebar content. If this page was a child of another page, there would be links here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique purus eu augue varius porttitor. In at nibh vitae quam commodo faucibus. Fusce euismod massa nec consequat sodales. Curabitur pharetra vehicula dolor, a tincidunt urna accumsan quis. Vestibulum justo orci, eleifend id scelerisque at, consequat in nibh. Donec dictum aliquet feugiat. Nullam viverra interdum eros, et vehicula tortor venenatis eu. Integer volutpat hendrerit enim eu pellentesque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique purus eu augue varius porttitor. In at nibh vitae quam commodo faucibus. Fusce euismod massa nec consequat sodales. Curabitur pharetra vehicula dolor, a tincidunt urna accumsan quis. Vestibulum justo orci, eleifend id scelerisque at, consequat in nibh. Donec dictum aliquet feugiat. Nullam viverra interdum eros, et vehicula tortor venenatis eu. Integer volutpat hendrerit enim eu pellentesque.