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 05: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%; } }