Incognitus Posts - Answer Overflow

Incognitus

Explore posts from servers

•Created by Incognitus on 6/23/2024 in #front-end

Is it possible to use container queries on container itself?

Hey guys, recently been trying to get back to container queries research, and found that styles don't apply on container itself. I think I saw Kevin do that in one of his videos, and now it doesn't work. Or maybe I'm trippin. Anyway example below didn't work. Google suggests using wrapper, but it doesn't go well when there is a list of such containers. I assume that I can use display: contents on wrapper, but overall wrapping doesn't seem like a good solution. Maybe someone figured out how to do this properly, or knows if its planned in specs. Any answer is appreciated!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Query Example</title>
    <style>
        /* Define the container */
        .card {
            container: card / inline-size;
            width: 100%; /* This ensures the card takes up available space */
            /* Other default styles for .card */
            background-color: lightgrey;
            padding: 10px;
            border: 1px solid grey;
        }

        /* Container query for .card when its width is more than 300px */
        @container card (min-width: 300px) {
            .card {
                /* Styles for .card when its width is more than 300px */
                background-color: lightblue;
                padding: 20px;
                border: 2px solid blue;
            }
        }
    </style>
</head>
<body>
    <div class="card">
        <p>This is a card component.</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Query Example</title>
    <style>
        /* Define the container */
        .card {
            container: card / inline-size;
            width: 100%; /* This ensures the card takes up available space */
            /* Other default styles for .card */
            background-color: lightgrey;
            padding: 10px;
            border: 1px solid grey;
        }

        /* Container query for .card when its width is more than 300px */
        @container card (min-width: 300px) {
            .card {
                /* Styles for .card when its width is more than 300px */
                background-color: lightblue;
                padding: 20px;
                border: 2px solid blue;
            }
        }
    </style>
</head>
<body>
    <div class="card">
        <p>This is a card component.</p>
    </div>
</body>
</html>

6 replies

KPCKevin Powell - Community

•Created by Incognitus on 4/25/2023 in #front-end

How to make <li> bullet just stay inside container, not move text ?

10 replies

Gaming

Programming