Closed lisavanmansom closed 1 week ago
.l-d {
display: flex;
flex-wrap: nowrap;
gap: 1.5em;
overflow: scroll;
width: 90%;
scroll-snap-type: x mandatory;
container: card-banner / inline-size;
}
@container card-banner (min-width: 450px) {
article {
min-width: 24.75em;
}
}
@container card-banner (min-width: 750px) {
article {
min-width: 38em;
height: 37em;
}
article img {
min-height: 52%;
max-width: unset;
}
.a-d {
max-height: 15.5em;
min-width: 95%;
}
.a-d div {
flex-direction: row;
}
.a-d div p {
width: 21em;
}
}
container query
Om een flexibele layout te creëren wil ik gebruik maken van container queries. Ik heb vooraf een aantal bronnen doorgenomen om vanuit daar te gaan coderen
bron: