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:
Direct Link to Article — Permalink
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.
0
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!