Newspaper or magazine-style columns are a good way to break up large blocks of text, especially if images are included. With CSS, responsive columns are really easy to achieve.
The following demo shows two blocks of columns, one with a title that spans all of the columns, and one with an image. Here is the CSS I used (this was done pretty on the fly and some of the code could be condensed a little better in a production environment).
article{ width: 100%; height: auto; -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-gap: 5%; /* Chrome, Safari, Opera */ -moz-column-gap: 5%; /* Firefox */ column-gap: 5%px; -webkit-column-rule: 1px outset #ccc; /* Chrome, Safari, Opera */ -moz-column-rule: 1px outset #ccc; /* Firefox */ column-rule: 1px outset #ccc; margin: 0 auto; text-align:justify; } figure{ column-span: none; -webkit-column-span: none; -moz-column-span: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; text-align:center; } img.aa{ height: 150px; width: auto; } article h1{ column-span: all; -webkit-column-span: all; -moz-column-spam: all; margin: 0; } .newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; text-align:justify; } .newspaper h1, .newspaper img.aa { column-span: all; -webkit-column-span: all; -moz-column-span: all; } .newspaper p { -webkit-margin-before: 0; } @media only screen and (max-width: 840px) { .newspaper { -moz-column-count:2; /* Firefox */ -webkit-column-count:2; /* Safari and Chrome */ column-count:2; } article{ width: 100%; height: auto; -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; -webkit-column-gap: 5%; /* Chrome, Safari, Opera */ -moz-column-gap: 5%; /* Firefox */ column-gap: 5%; -webkit-column-rule: 1px outset #ccc; /* Chrome, Safari, Opera */ -moz-column-rule: 1px outset #ccc; /* Firefox */ column-rule: 1px outset #ccc; margin: 0 auto; text-align:justify; } } @media only screen and (max-width: 700px) { .newspaper { -moz-column-count:1; /* Firefox */ -webkit-column-count:1; /* Safari and Chrome */ column-count:1; } article{ width: 100%; height: auto; -webkit-column-count: 1; /* Chrome, Safari, Opera */ -moz-column-count: 1; /* Firefox */ column-count: 1; -webkit-column-gap: 5%; /* Chrome, Safari, Opera */ -moz-column-gap: 5%; /* Firefox */ column-gap: 5%; -webkit-column-rule: 1px outset #ccc; /* Chrome, Safari, Opera */ -moz-column-rule: 1px outset #ccc; /* Firefox */ column-rule: 1px outset #ccc; margin: 0 auto; text-align:justify; } }
If you want to play with the original and see how it reacts to browser widths just click here.
Latest posts by Diane Ensey (see all)
- Tables That You Can Sort and Search - May 24, 2017
- Responsive Newspaper-Style Columns are Easy with CSS - May 23, 2017
- Use Tooltips to Add Context - May 22, 2017