I am able to scale a website's margin based on the screen's size by using vw or % units. However, I would like it to scale at a greater rate, the smaller the viewport is. So while there may be the full 10% margin when the browser window has filled a full 1920x1080 monitor, I would like the margin to be 0% when displayed on a mobile device such as an android phone.
I can accomplish an abrupt change in margin with the below css, but how could I make it a smooth downscaling of the margin?
.my-class{
margin: 0 10%;
}
@media all and (max-width: 500px) {
.my-class{
margin: 0 0%;
}
}
question from:https://stackoverflow.com/questions/65874073/css-scale-margin-down-to-zero-based-on-screen-size