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 as tablets in portrait mode, in long-form content, such as this article because contextually, the line-lengths feel very long.
So, on super large screens, you’ll get capped at 70rem (or whatever you think a good maximum is), and on small screens you’ll get full width, which is fine. But it’s those in-betweens that aren’t so great. I made a little demo to get a feel for it. This video makes it clear I think:
Sorry to be “that guy”, but how is this any different from setting
min-width: 16rem; width: 90vw; max-width: 70rem;
? That’s what I’ve been doing for what seems like a decade, at least (sans themin-width
, which just seems like a bad idea to have around flexible content).I am not a fan of the traditional max-width wrapper. I prefer to do the math with just the padding, this way I get the benefits of using background color and background image as well.
https://codepen.io/mikemai2awesome/pen/YzpQzaP
I do pretty much the same thing;
Not to be “that guy” either. But to dismiss new tools within CSS is how we get a bunch of tired dinosaurs complaining about flexbox when floats worked just fine.
nobody ever said floats worked fine. tables, maybe.
I feel like every time I come here I end up learning just another way to do something that already works without any real benefit.
And let’s be honest, when we need responsive web design there isn’t a better alternative to bootstrap’s grid system.
I’d love for you to elaborate on that. At the same time, I think you’re missing the BIG picture here. CSS is giving us new utilities that give us finer control of responsive design—to the extent that media queries are now just another tool in the shed.
So, is
clamp()
better than max-width? I dunno. It depends on what it’s for. In this case, it makes for a pretty darn good wrapper utility that allows us to force a range of values in a way thatmax-width
cannot.And is it better than Bootstrap’s grid system? Again, dunno. But equating them is a bad idea because
clamp()
isn’t designed to be a system or a framework the same way that Bootstrap is.A great example -(s) in the comments as well!
Compared to the max-width example, It seems like there is an issue with text wrapping on small screen sizes.
How to avoid text being capped?
I don’t get it. How is it better than this?
At least, this version doesn’t give an horizontal scroll on viewports thinner than
320px
/16rem
.