Template:ROH Soldier/styles.css: Difference between revisions
m
flex % for image and table
(flex behaviour larger than 800px) Tag: Reverted |
m (flex % for image and table) |
||
| (2 intermediate revisions by the same user not shown) | |||
Line 1:
/* Responsive layout for displaying the image above the table when the screen size is reduced
.row {
display: flex;
Line 7:
.roh-column {
flex:
max-width: 100%;
margin: 5px;
Line 14:
@media (max-width: 800px) {
.roh-column {
flex: 0 1 auto;
max-width: 100%;
}
} */
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-image {
padding: 10px;
flex: 40%;
}
.flex-table {
padding: 10px;
flex: 60%;
}
/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {
.flex-image, .flex-table {
flex: 100%;
}
}
| |||