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

As an aside, you don't need to use `calc()`, `clamp( 60px, value - value, 186px)` is perfectly valid (although it does look like you're using zero as your second value, which obviously doesn't sit within the range of the others). — David Thomas, Apr 01 '23 at 23:17

score 0 · Answer 1 · answered Apr 01 '23 at 21:13

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.

score 0 · Answer 2 · answered Apr 01 '23 at 23:12

0

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.

answered Apr 01 '23 at 23:12

MandoMando

19
1
2

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

2 Answers2