basement basement - 24 days ago 8
CSS Question

Increase element padding as browser width decreases

Default behavior for padding in CSS behaves as expected and will not increase when the browser width is decreased. In the snippet below a percent based value for padding will decrease as width decreases like expected.

enter image description here



html {
background-color: #f8f8f8;
font-family: Arial;
text-transform: uppercase;
}
h1 {
display: inline-block;
background-color: #fe0;
padding: 4%;
}

<h1>Highlighted Text</h1>





I've learned some interesting CSS techniques using
calc
and
vw
,
vh
, etc. values to do some interesting non-standard behavior.

Can I reverse default behavior and increase padding while width decreases ( Or at least create an illusion of this ) using CSS?

EDIT: Also I'm aware of media-queries but I want this transition to be buttery smooth like how default padding works.

Answer Source

Here you go :)

html {
  background-color: #f8f8f8;
  font-family: Arial;
  text-transform: uppercase;
}
h1 {
  display: inline-block;
  background-color: #fe0;
  padding: calc(50px - 4%);
}
<h1>Highlighted Text</h1>