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.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier

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.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier


Print Share Comment Cite Upload Translate Updates
APA

Chris Coyier | Sciencx (2021-02-17T15:54:30+00:00) Use CSS Clamp to create a more flexible wrapper utility. Retrieved from https://www.scien.cx/2021/02/17/use-css-clamp-to-create-a-more-flexible-wrapper-utility/

MLA
" » Use CSS Clamp to create a more flexible wrapper utility." Chris Coyier | Sciencx - Wednesday February 17, 2021, https://www.scien.cx/2021/02/17/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
HARVARD
Chris Coyier | Sciencx Wednesday February 17, 2021 » Use CSS Clamp to create a more flexible wrapper utility., viewed ,<https://www.scien.cx/2021/02/17/use-css-clamp-to-create-a-more-flexible-wrapper-utility/>
VANCOUVER
Chris Coyier | Sciencx - » Use CSS Clamp to create a more flexible wrapper utility. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/17/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
CHICAGO
" » Use CSS Clamp to create a more flexible wrapper utility." Chris Coyier | Sciencx - Accessed . https://www.scien.cx/2021/02/17/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
IEEE
" » Use CSS Clamp to create a more flexible wrapper utility." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/02/17/use-css-clamp-to-create-a-more-flexible-wrapper-utility/. [Accessed: ]
rf:citation
» Use CSS Clamp to create a more flexible wrapper utility | Chris Coyier | Sciencx | https://www.scien.cx/2021/02/17/use-css-clamp-to-create-a-more-flexible-wrapper-utility/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts