How to make a padding start at a max value when full screen but shrink gradually to minimum value as browser width gets smaller?

Question

I've been using padding-left: clamp( 60px, calc( value - value ), 186px) but can't seem to figure out how to shrink the paddding properly when i shrink the width of my browser

Answer 1

Use ems instead of pixels. the browser default of 1em is 16 pixels, and ems change relative to the size of the parent, but work a bit differently when used for margins, padding, and widths

.example {
font-size: 1rem;
padding: 1em;
}

In the example above, the padding will be relative to the font-size instead of the parent. So the padding will shrink as the font size shrinks, and grow when the font size grows.

Answer 2

Found a solution for my problem. Ended up using an extra div with a percentage width and used a min-width + max-width on my desired values.