Making CSS Padding Responsive [2023]

First – you may want to use “padding-block:” – which is the padding for the top and the bottom only.

You can also use a “min()” statement or line of code, or whatever it’s called in CSS

If you type:

section {

padding-block: min(10vh, 10rem)

Min, Max & Clamp


To use “min” – you may for example have a back-ground colour, with width:70% and max width:500px

width: min(500px, 70%)

Min will “look” for the smallest value – either 500px, or 70%

Min will choose the smallest value.

If you are on a mobile for example, 70% width, is less than 500px – so on mobile the background will be 70% of the viewport for a mobile.

If you are on a desktop computer, 500px will be less than 70% of the screen width – so the background will be 500px wide.

Responsive Equal Padding Top & Bottom

If you wanted to pad the top and bottom of text in the background:

padding-block: min (30px; 10%) ;


width: max(500px, 70%)

max is the opposite – now it will use the maximum value.

on Mobile, 500px will be the largest

On Desktop – 70% will be the largest.

Padding with a Percentage

Calc Rem + VW

Yet another way to add padding, is to use “calc” and then add parameters/values for rem and vw

Rem (short for “root-em”) units dictate an element’s font size relative to the size of the root element. By default, most browsers use a font size value of 16px. 

The full form of VW is viewport width. It works like the percentage unit. Specifying 10vw is equivalent to occupying 10% of entire visible screen width.

This code works okay by the looks of it:

padding-block: calc(0.75rem + 0.5vw);
padding-left:  calc(0.75rem + 0.5vw);
padding-right: calc(0.75rem + 0.5vw);

Image & Text Aligned Side by Side Using CSS Grid

Here’s an example, that uses “padding: 2rem;” and “gap: 1rem:” to space the image and the

If you click on the CSS tab/button – everything below @media, is to provide a separate style and effect on mobile devices

To be honest, I having got a fecking clue with CSS Grid, I need a refresher – here’s a blog post I did earlier –


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s