Native support for Container Queries on designer, without custom code.

It'll be nice to have it since all modern browsers already support it. For those who don't know what I'm talking about, container queries and container query length units allow a text element to change it's font size relative to it's parent element.

For example, you can have a responsive text element occupying 100% of the parent container's width, to always stay the same without breaking or overflowing on window resize. Same behavior as if the text was an SVG element with object-fit: contain. All this without any JS of any sort.

These are the units:

  • cqw: 1% of a query container's width

  • cqh: 1% of a query container's height

  • cqi: 1% of a query container's inline size

  • cqb: 1% of a query container's block size

  • cqmin: The smaller value of either cqi or cqb

  • cqmax: The larger value of either cqi or cqb


  • Teo García Villa
  • Sep 28 2023
  • Shannon Rednour commented
    08 Oct 13:50

    This is the future. Please support this feature!!