Androbaut Androbaut - 1 month ago 19
CSS Question

Scale div padding according to screen width

I'm trying to make the padding around a div scale from 15% to 5% within the bounds of a media query.



So, let's say I've defined the min & max width where I want this to take effect:

@media (min-width: 500px) and (max-width: 1500px)


My goal is to go from 15% @ 1500px to 5% @ 500px. I know doing this will require an equation to change the ratio based on screen width, but I'm unsure about/inexperienced setting these types of things up.

Any advice/suggestions are appreciated!

Answer

The official answer is this can't be done using CSS alone.

However, you can use something like this for a workaround...

div.dynamic {padding:5vw; border:1px solid;}

@media (min-width: 500px) and (max-width: 599px) {div.dynamic {padding:5vw;}}
@media (min-width: 600px) and (max-width: 699px) {div.dynamic {padding:6vw;}}
@media (min-width: 700px) and (max-width: 799px) {div.dynamic {padding:7vw;}}
@media (min-width: 800px) and (max-width: 899px) {div.dynamic {padding:8vw;}}
@media (min-width: 900px) and (max-width: 999px) {div.dynamic {padding:9vw;}}
@media (min-width: 1000px) and (max-width: 1099px) {div.dynamic {padding:10vw;}}
@media (min-width: 1100px) and (max-width: 1199px) {div.dynamic {padding:11vw;}}
@media (min-width: 1200px) and (max-width: 1299px) {div.dynamic {padding:12vw;}}
@media (min-width: 1300px) and (max-width: 1399px) {div.dynamic {padding:13vw;}}
@media (min-width: 1400px) and (max-width: 1499px) {div.dynamic {padding:14vw;}}
@media (min-width: 1500px) {div.dynamic {padding:15vw;}}
<div class="dynamic">This is the div</div>