Content added Content deleted
(change flex behaviour for screen less than 800px) |
(flex behaviour larger than 800px) Tag: Reverted |
||
Line 7: | Line 7: | ||
.roh-column { |
.roh-column { |
||
flex: |
flex: min-content; |
||
max-width: 100%; |
max-width: 100%; |
||
margin: 5px; |
margin: 5px; |
||
Line 14: | Line 14: | ||
@media (max-width: 800px) { |
@media (max-width: 800px) { |
||
.roh-column { |
.roh-column { |
||
flex: 0 1 auto; |
flex: 0 1 auto; /* Same as initial */ |
||
max-width: 100%; |
max-width: 100%; |
||
} |
} |
Revision as of 10:39, 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: min-content;
max-width: 100%;
margin: 5px;
}
@media (max-width: 800px) {
.roh-column {
flex: 0 1 auto; /* Same as initial */
max-width: 100%;
}
}