CSS Container Queries not working
I was going over the bare basics of container queries in CSS and I was not able to get the colour paragraph inside the container to change when the div's size is >=400px
<style>
.container {
container-type: inline-size;
border: 2px solid black;
}
p {
background-color: blue;
}
@container (min-width: 400px) {
p {
background-color: red;
font-size: 2rem;
}
}
</style>
<body>
<div class="container">
<p>Card content</p>
</div>
</body>
Other things worked... like the paragraph's font size would change at that breakpoint, but this background colour just wouldn't. Does anyone know why?
<style>
.container {
container-type: inline-size;
border: 2px solid black;
}
p {
background-color: blue;
}
@container (min-width: 400px) {
p {
background-color: red;
font-size: 2rem;
}
}
</style>
<body>
<div class="container">
<p>Card content</p>
</div>
</body>
Other things worked... like the paragraph's font size would change at that breakpoint, but this background colour just wouldn't. Does anyone know why?
