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
Login to add comment
Other posts in this group





CSS-Questions is a mini site where you can test your CSS knowledge with over 100 questions.

Web design veteran Andy Clarke is offering a two-hour workshop all about creating practical and creative page layouts this September 18. Register and save a few bucks with a coupon code.

How do you design block quotes and pull quotes to reflect a brand’s visual identity and help tell its story? Here’s how I do it by styling the HTML blockquote
element using borders, de