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

The post Use CSS Clamp to create a more flexible wrapper utility appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility

Vytvořeno 4y | 17. 2. 2021 16:20:47


Chcete-li přidat komentář, přihlaste se

Ostatní příspěvky v této skupině

Modern Scroll Shadows Using Scroll-Driven Animations

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here

5. 5. 2025 13:20:16 | CSS tricks
CSS shape() Commands

The CSS shape() function recently gained support in both Chromium and WebKit browsers. It's a way of drawing complex shapes when clipping elements with the clip-path prope

2. 5. 2025 13:30:15 | CSS tricks
State of Devs: A Survey for Every Developer

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more. 


1. 5. 2025 14:20:29 | CSS tricks
Revisiting Image Maps

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and are

30. 4. 2025 12:50:05 | CSS tricks
Open Up With Brad Frost, Episode 2

Brad Frost is running this new little podcast called Open Up. Folks write in with questions about the “other” side

29. 4. 2025 16:10:05 | CSS tricks
Anchor Positioning Just Don’t Care About Source Order

The fact that anchor positioning eschews HTML source order is so CSS-y because it's another separation of concerns between content and presentation.


28. 4. 2025 14:30:06 | CSS tricks
The Lost CSS Tricks of Cohost.org

In this post, Blackle Mori shows you a few of the hacks found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal.


<

24. 4. 2025 13:10:07 | CSS tricks