Direct link to the article Use CSS Clamp to create a more flexible wrapper utility

Use CSS Clamp to create a more flexible wrapper utility

I like Andy’s idea here:

.wrapper {
  width: clamp(16rem, 90vw, 70rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

Normally I’d just set a max-width there, but as Andy says:

This becomes a slight issue in mid-sized viewports, such

Avatar of Chris Coyier
Chris Coyier on (Updated on )
Direct link to the article Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs

Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs

Beyond using media queries and modern CSS layouts, like flexbox and grid, to create responsive websites, there are certain overlooked things we can do well to make responsive sites. In this article, we’ll dig into a number tools (revolving around …

Avatar of David Atanda
David Atanda on (Updated on )
Direct link to the article How to Make a Media Query-less responsive Card Component

How to Make a Media Query-less responsive Card Component

Fun fact: it’s possible to create responsive components without any media queries at all. Certainly, if we had container queries, those would be very useful for responsive design at the component level. But we don’t. Still, with or without …

Avatar of Geoffrey Crofte
Geoffrey Crofte on (Updated on )