How can I make a function in JavaScript make div or img or a padding Scale depending on screen width?
I don't want to use the CSS solution
This is for a div padding am using
@media(min-width: 300px) and (max-width: 399px) {div.hero-position {padding-top: 58px; padding-bottom: 36px;}}
@media (min-width: 400px) and (max-width: 499px) {div.hero-position {padding-top: 71px; padding-bottom: 48px;}}
@media (min-width: 500px) and (max-width: 599px) {div.hero-position {padding-top: 82px; padding-bottom: 60px;}}
@media (min-width: 600px) and (max-width: 699px) {div.hero-position {padding-top: 98px; padding-bottom: 72px;}}
@media (min-width: 700px) and (max-width: 799px) {div.hero-position {padding-top: 99px; padding-bottom: 84px}}
@media (min-width: 800px) and (max-width: 899px) {div.hero-position {padding-top: 116px; padding-bottom: 96px;}}
@media (min-width: 900px) and (max-width: 999px) {div.hero-position {padding-top: 124px; padding-bottom: 108px}}
@media (min-width: 1000px) and (max-width: 1099px) {div.hero-position {padding-top: 118px; padding-bottom: 120px;}}
@media (min-width: 1100px) and (max-width: 1199px) {div.hero-position {padding-top: 140px; padding-bottom: 132px;}}
@media (min-width: 1200px) and (max-width: 1299px) {div.hero-position {padding-top: 174px; padding-bottom: 144px;}}
@media (min-width: 1300px) and (max-width: 1399px) {div.hero-position {padding-top: 203px; padding-bottom: 156px;}}
@media (min-width: 1400px) and (max-width: 1499px) {div.hero-position {padding-top: 218px; padding-bottom: 168px;}}
@media (min-width: 1500px) {div.hero-position {padding-top: 239px; padding-bottom: 180px;}}
clamp()
is quite new and not, yet, well supported. It's also probably not really what the OP is wanting, although it could be a portion of what's desired. – Makyen♦ Jul 1 '20 at 21:59padding-top
andpadding-bottom
critical, or are you just looking for something that looks good at those viewport widths? Do the effective values for values forpadding-top
andpadding-bottom
have to jump from defined pixel value to pixel value, or is continuous variation acceptable? – Makyen♦ Jul 1 '20 at 22:04clamp()
does really isn't what the code the OP shows indicates they are doing (i.e. it doesn't appear to be the main thing the OP is interested in), although it might be useful, depending on what the OP really wants. – Makyen♦ Jul 1 '20 at 22:11