Read more

CSS: CSS Container Queries

Emanuel De
March 16, 2023Software engineer at makandra GmbH

Container queries enable you to apply styles to an element based on the size of the element's container. If, for example, a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts. Container queries are an alternative to media queries, which apply styles to elements based on viewport size or other device characteristics.

This feature is now stable across browsers.


This feature landed in browsers at the end of 2022. According to our support policy this will become generally usable starting Dec 2024.

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show snapshot

Below is the example from the linked MDN web docs:

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
.post {
  container-type: inline-size;

/* Default heading styles for the card title */
.card h2 {
  font-size: 1em;

/* If the container is larger than 700px */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
Posted by Emanuel De to makandra dev (2023-03-16 09:21)