Modern CSS function - clamp()
Are you still using static width to size your wrapper/container??? its time to switch to the clamp function. You can use clamp() in CSS to size your wrapper/container element. An example is hereunder:
clamp(min, val, max) min the smallest unit you ever want max the biggest unit you ever want
val the ideal unit
/**
* WRAPPER
* Sets a max width, adds a consistent gutter and horizontally
* centers the contents
*/
.wrapper{
width: 90vw;
width: clamp(16rem, 90vw, 70rem);
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
position: relative;
}
It gives you more fine-grained control and really improves line-lengths and readability on medium viewports, like portrait tablets.
Reference:
https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility
https://www.youtube.com/watch?v=Rw9GZ52P4mY