Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
max-width

2 Articles
{
,

}
Image
Direct link to the article Manuel Matuzovic: max() Trickery
logical properties margin max max-width

Manuel Matuzovic: max() Trickery

By way of a post by Manuel Matuzović which is by way of a demo by Temani Afif.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

You’d be doing yourself a favor to read Manuel’s breakdown of …

Image
Geoff Graham on Oct 18, 2022
Image
Direct link to the article Use CSS Clamp to create a more flexible wrapper utility
clamp max-width responsive

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

…
Image
Chris Coyier on Feb 17, 2021 Updated on Feb 18, 2021

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top
Advertisement