<main>
<h2> Container Queries (main)</h2>
</main>
<section>
<h2> Container Queries (section)</h2>
</section>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: #557;
display: grid;
gap: 20px;
place-content: center;
}
main,
section {
max-inline-size: 80vw;
min-inline-size: 30vw;
border: 1px dotted #cecece;
padding: 1rem;
overflow: hidden;
min-block-size: 30vh;
display: grid;
place-content: center;
resize: horizontal;
}
main {
container-type: inline-size;
container-name: main;
}
section {
container-type: inline-size;
container-name: section;
}
h2 {
font-size: 2rem;
color: orange;
}
@container main (min-width: 40em) {
h2 {
font-size: 3rem;
color: lime;
}
}
@container section (min-width: 40em) {
h2 {
font-size: 4rem;
color: #f36;
text-shadow: 1px 1px 1px rgb(255 255 255 / 0.6);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.