CSS: CLAMP() Function

The CLAMP(...) CSS function should be used much more in custom CSS. It basically sets a min, preferred, and max value for any CSS class based on viewport. Takes the guesswork out of everything.

From W3:

"The CSS clamp() function is used to set a value that will adjust responsively between a minimum value, a preffered value, and a maximum value depending on the size of the viewport."

Example:

font-size: clamp(1.5rem, 5vw, 3rem);

Basically means we want to use 5vw for the font size if possible, but based on the viewport make sure we're not smaller than 1.5rem or larger than 3rem. Fixed everything related to headings getting in the way when viewport size changes. 

Pondering, seems to be that Bootstrap and other CSS frameworks should use CLAMP(...) when it comes to things like heading tags so that an H1 tag on desktop also fits in a mobile viewport without having to do various other things like hide/show or creating custom size classes.

VW:

"vw stands for "viewport width" and represents 1% of the width of the browser's viewport. For example, 100vw equals the full width of the viewport, making it useful for responsive design."