Content added Content deleted
No edit summary Tag: Manual revert |
(testing flex container) |
||
Line 1: | Line 1: | ||
/* Responsive layout for displaying the image above the table when the screen size is reduced |
/* Responsive layout for displaying the image above the table when the screen size is reduced |
||
.row { |
.row { |
||
display: flex; |
display: flex; |
||
Line 7: | Line 7: | ||
.roh-column { |
.roh-column { |
||
flex: 0 1 auto; |
flex: 0 1 auto; |
||
max-width: 100%; |
max-width: 100%; |
||
margin: 5px; |
margin: 5px; |
||
Line 16: | Line 16: | ||
flex: 0 1 auto; |
flex: 0 1 auto; |
||
max-width: 100%; |
max-width: 100%; |
||
} |
|||
} */ |
|||
.flex-container { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
.flex-image { |
|||
padding: 10px; |
|||
flex: 50%; |
|||
} |
|||
.flex-table { |
|||
padding: 10px; |
|||
flex: 50%; |
|||
} |
|||
/* Responsive layout - makes a one column-layout instead of a two-column layout */ |
|||
@media (max-width: 800px) { |
|||
.flex-image, .flex-table { |
|||
flex: 100%; |
|||
} |
} |
||
} |
} |
Revision as of 11:11, 28 June 2024
/* Responsive layout for displaying the image above the table when the screen size is reduced
.row {
display: flex;
flex-wrap: wrap;
padding: 0 5px;
}
.roh-column {
flex: 0 1 auto;
max-width: 100%;
margin: 5px;
}
@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: 50%;
}
.flex-table {
padding: 10px;
flex: 50%;
}
/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {
.flex-image, .flex-table {
flex: 100%;
}
}