Template:Content/styles.css: Difference between revisions
Jump to navigation
Jump to search
Created page with ".tile-row { display: flex; flex-wrap: nowrap; justify-content: center; margin-bottom: 2em; gap: 1.5%; overflow-x: auto; } .tile-row > div { flex: 0 0 18%; min-width: 160px; max-width: 200px; display: flex; flex-direction: column; align-items: center; } .tile-top { text-align: center; width: 100%; } .tile-bottom h2 { margin: 0.4em 0 0; text-align: center; font-size: 1.1em; } @media (max-width: 800px) {..." |
No edit summary |
||
| Line 1: | Line 1: | ||
.tile-row { | .tile-row { | ||
display: flex; | display: flex; | ||
flex-wrap: | flex-wrap: wrap; /* allow multiple rows */ | ||
justify-content: center; | justify-content: center; | ||
gap: 1.5em; | |||
margin: 1em auto 2em auto; | |||
max-width: 1200px; | |||
} | } | ||
.tile-row > div { | .tile-row > div { | ||
flex: | flex: 1 1 180px; | ||
max-width: 220px; | |||
max-width: | |||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
align-items: center; | align-items: center; | ||
} | } | ||
.tile-top { | .tile-top { | ||
text-align: center; | text-align: center; | ||
width: 100%; | width: 100%; | ||
} | } | ||
.tile-bottom h2 { | .tile-bottom h2 { | ||
margin: 0.4em 0 0; | margin: 0.4em 0 0; | ||
| Line 24: | Line 26: | ||
font-size: 1.1em; | font-size: 1.1em; | ||
} | } | ||
@media (max-width: 800px) { | @media (max-width: 800px) { | ||
.tile-row { | .tile-row { | ||
gap: 1em; | |||
} | } | ||
.tile-row > div { | .tile-row > div { | ||
flex: | flex: 1 1 45%; | ||
} | } | ||
} | } | ||
Revision as of 04:19, 26 July 2025
.tile-row {
display: flex;
flex-wrap: wrap; /* allow multiple rows */
justify-content: center;
gap: 1.5em;
margin: 1em auto 2em auto;
max-width: 1200px;
}
.tile-row > div {
flex: 1 1 180px;
max-width: 220px;
display: flex;
flex-direction: column;
align-items: center;
}
.tile-top {
text-align: center;
width: 100%;
}
.tile-bottom h2 {
margin: 0.4em 0 0;
text-align: center;
font-size: 1.1em;
}
@media (max-width: 800px) {
.tile-row {
gap: 1em;
}
.tile-row > div {
flex: 1 1 45%;
}
}