User:Emma/common.css: Difference between revisions

Revision as of 06:38, 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-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;
    }
}