Template:Reagent cards/styles.css: Difference between revisions
From Space Station 14 Wiki
typo |
media query between flex grow (1 col) and flex basis (2 (or more?) cols) - someone with a wide monitor or just big monitor but small scale please test that it looks okay |
||
Line 10: | Line 10: | ||
.reagents-list > .reagent-card { | .reagents-list > .reagent-card { | ||
box-sizing: border-box; | box-sizing: border-box; | ||
margin: 0; | } | ||
@media (max-width: 900px) { | |||
.reagents-list > .reagent-card { | |||
flex-grow: 1; | |||
} | |||
} | |||
@media (min-width: 900px) { | |||
.reagents-list > .reagent-card { | |||
box-sizing: border-box; | |||
margin: 0; | |||
--flex-basis: calc(50% - var(--gap) / 2); | |||
flex-basis: var(--flex-basis); | |||
} | |||
} | } |
Revision as of 15:35, 26 May 2025
.reagents-list {
--gap: 1rem;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
gap: var(--gap);
}
.reagents-list > .reagent-card {
box-sizing: border-box;
}
@media (max-width: 900px) {
.reagents-list > .reagent-card {
flex-grow: 1;
}
}
@media (min-width: 900px) {
.reagents-list > .reagent-card {
box-sizing: border-box;
margin: 0;
--flex-basis: calc(50% - var(--gap) / 2);
flex-basis: var(--flex-basis);
}
}