container query / about page

[lisavanmansom]

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:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
• https://css-tricks.com/css-container-queries/

[lisavanmansom]

Container query code

.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;
        }
    }

[lisavanmansom]

Container queries resultaat