Adaptive font-size using container query size

Container queries are the best thing ever. Even now more so using it to make a fancy title always grow with it's parent or even become smaller when parent is smaller.

It's as simple as:

.card-with-title {
  /* By setting container-type to inline-size we can then use Container query length units */
  container-type: inline-size;
  h2 {
    font-size: 18cqi;
    text-transform: uppercase;
    font-family: "Impact", sans-serif;
  } 
}

Container query units #

All the container query length units are:

• 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

For more info check MDN

Codepen example #

See the following example codepen:

See the Pen Adaptive font-size using container query by Wonky (@Wonky) on CodePen.

---

• Next: Smooth fade in effect for lazyloaded images
• Previous: Dialog element not showing correctly