Browse:Animation/styles.css: Difference between revisions
From Bulbapedia, the community-driven Pokémon encyclopedia.
Jump to navigationJump to search
(stylesheet) |
(thanks to Lake for pointing out that the rows are aligned even without the display grid, and all it does is just add unnecessary space on thinner screens) |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* Responsiveness for top row of most recent seasons */ | /* Responsiveness for top row of most recent seasons */ | ||
.top-seasons { | .top-seasons { | ||
padding: 10px 10px 5px 10px; | |||
margin-bottom: 0.5em; | |||
display: grid; | |||
gap: 10px; | |||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | ||
grid-auto-rows: minmax(100px, auto); | |||
} | } | ||
@media (min-width:1181px) and (max-width: | @media (min-width:1181px) and (max-width:1469px) { | ||
.top-seasons { | .top-seasons { | ||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | ||
| Line 10: | Line 15: | ||
} | } | ||
@media (min-width:1001px) and (max-width: | @media (min-width:1001px) and (max-width:1201px) { | ||
.top-seasons { | .top-seasons { | ||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | ||
| Line 24: | Line 29: | ||
margin: 2px; | margin: 2px; | ||
text-align: center; | text-align: center; | ||
} | } | ||
Latest revision as of 18:46, 1 July 2024
/* Responsiveness for top row of most recent seasons */
.top-seasons {
padding: 10px 10px 5px 10px;
margin-bottom: 0.5em;
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: minmax(100px, auto);
}
@media (min-width:1181px) and (max-width:1469px) {
.top-seasons {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
}
@media (min-width:1001px) and (max-width:1201px) {
.top-seasons {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
/* Aligned rows for season list vertical */
.season-list-vert {
flex-basis: 200px;
background: #E0F2B6;
padding: 10px;
border-radius: 10px;
margin: 2px;
text-align: center;
}
