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
Min
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%) ;
Max
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 – https://businessdaduk.com/2022/11/21/css-grid-for-beginners-2022/
