CSS Container Queries
I've always seen responsive elements styled with CSS media queries. These often need more media queries to make them look good on different page sections. There's a way to skip the headache.
Use of container queries to apply CSS styles with the element's container size in mind instead of the viewport size:
/* Create a container context */
.container {
container-type: inline-size;
}
/* Default font size */
.card h2 {
font-size: 1em;
}
/* Updated font size when the container is larger than 500px */
@container (min-width: 500px) {
.card h2 {
font-size: 2em;
color: gray;
}
}
<div class="container">
<div class="card">
<h2>Card title</h2>
</div>
</div>