3,554
edits
m (Finished) |
(Testing CSS) |
||
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-wide { | |||
float: left; | |||
width: 60%; | |||
} | |||
.portal-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; | |||
} | |||
} |