|
|
| Line 1: |
Line 1: |
| /* Conditional column handling for pages with multiple columns
| | |
| On wide screens, show these as two columns
| |
| On narrow and mobile screens, let them collapse into a single column */
| |
| .column-left {
| |
| float: left;
| |
| width: 50%;
| |
| }
| |
| .column-right {
| |
| float: right;
| |
| width: 49%;
| |
| }
| |
| .column-left-auto (
| |
| float: left;
| |
| }
| |
| .column-right-auto (
| |
| float: right;
| |
| }
| |
| .column-left-wide {
| |
| float: left;
| |
| width: 60%;
| |
| }
| |
| .column-right-narrow {
| |
| float: right;
| |
| width: 39%;
| |
| }
| |
| .column-left-extra-wide {
| |
| float: left;
| |
| width: 70%;
| |
| }
| |
| .column-right-extra-narrow {
| |
| float: right;
| |
| width: 29%;
| |
| }
| |
| @media only screen and (max-width: 800px) {
| |
| /* Decouple the columns on narrow screens */
| |
| .column-left,
| |
| .column-right,
| |
| .column-left-wide,
| |
| .column-right-narrow,
| |
| .column-left-extra-wide,
| |
| .column-right-extra-narrow {
| |
| float: inherit;
| |
| width: inherit;
| |
| }
| |
| }
| |
