Family Magazine

Responsive Padding in CSS (2023)

By Geoff Griffiths @mmatraining1980

Instead of using pixels (px) you can use %

Better still, us viewport width and viewport height.

padding: 1vw – 1% of viewport width
padding: 1vh – 1% of viewport height
padding: 1vmin – 1vw or 1vh, whichever is smaller
padding: 1vmax – 1vw or 1vh, whichever is larger

For inline css:

style="padding-top:2vw;"

For style sheets or <style> tags:

div-container{

        padding-left: 12%;
        padding-top: 0.5%;
    }

Use % or vw and vh


Back to Featured Articles on Logo Paperblog