User:Emma/common.css: Difference between revisions
Jump to navigation
Jump to search
Want an adless experience? Log in or Create an account.
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; | |||
} | |||
} |
Revision as of 06:28, August 10, 2015
/* 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; } }