10 Modern CSS Features You Want to Use

1. Min, max and clamp

Putting these together as they are overlapping.

/* Keeps buttons from getting too wide on large screens */
.pricing-button {
  width: min(300px, 90%);
}

/* Keeps buttons from getting too wide on large screens */
.pricing-button {
  width: min(300px, 90%);
}

/* Ensures text stays readable even on tiny screens */
.terms-container {
  font-size: max(16px, 1.2vw);
}

/* Ensures text stays readable even on tiny screens */
.terms-container {
  font-size: max(16px, 1.2vw);
}

max() is like setting a minimum value, but it picks the larger option. Perfect for preventing elements from shrinking too much on mobile devices.

Subscribe to get the latest posts sent to your email.