Creating squishy padding and margin that adapt to the viewport

Modern CSS features like min(), max(), and clamp(), along with viewport units, are incredibly robust.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:53 - Using padding-block
01:32 - Using min()

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[franciscogonzaleztorres]

Your videos in a short time refresh my forgotten css skills. Your content is like the pareto thing in the 20% of knowledge you increment the 80% of css productivity. I really appreciate your effort. Thank you!

[nathanwatts]

This could not have come at a better time, I have been scratching my head for days trying to work out site padding without using a heap of classes or media queries. Thank you so much Kevin.

[elisabethdejardins]

"People do crazy thing"
That line make me laugh!

[aram]

I always love how you solve real-world problems utilizing the stuff that, yes, I had known before, but somehow never thought of using them.

[petegrant]

A very simple game changer :) I was getting really fed up of having a handful or media quires, these set to desktop, laptop, tablet portrait / landscape phone etc...this simple approach solves that easily. Knew there had to be 'something' out there....you've pointed this out nicely. Thank you Kevin 👍🏻

[zachjensz]

Can't wait for Demystified Course Launch on August 4th!!!!

[DeltaNrOne]

This is a life saver. I run into this quite often recently.

[johntrent]

Damn, I did know about padding/margin-inline (because of you) but not same with "-block". I was fed up about having to fully type top and bottom. Thanks a lot, you're the Gyro Gearloose of CSS !

[lonleybeer]

Amazing video as always Kevin, also wanna say that i was using the exact same colours for my project website and i wasn't sure what colours I could use with turquoise but now i got some ideas so thanks 😂

[lucienchu]

give this gentleman enough time, he would eliminate the media query, that is the future of CSS.

[adsuabeakufea]

great video! very clear and to the point

[ead]

🗜️ Clamp FTW! 🗜️

I used to struggle with mobile responsiveness by setting absolute values for padding, margin, etc on different viewports.

And then I watched several clamp related videos, including the one by Kevin. What a life saver it is indeed!

It helps me to avoid delving too much into small things like padding and margin and focus on things that matter. Like the backend for example.

Thanks for highlighting the importance of these amazing functions that makes layout based tasks a lot easier. ✌🏻

[alphabruce]

Wow! I knew of min from your post but never know what to do with it. Thanks alot.

And I browse on some sites on landscape not because am crazy but because the layout isn't designed for phone so you have to keep scrolling sideways and downwards if you are in portrait or the padding is too much (1-3 words a line)

[welling]

wow - I've never seen 'padding-block' before!

[haythamkenway]

Great video kevin , please describe in your next video that what is "- - i" that some people adding this in style of HTML

[Liam-fbtu]

Great video Kevin as always, one quick question though…. What’s the difference using the min value compared to using clamp? Is it just with min it’s either the min or the max value and with clamp it can scale up between the min and max values set?

[whatc]

Please make a responsive website trick video

[afzalmahmud]

yapp People do crazy Things 😄.love you ❤️

[amirkamalian]

Another great video from CSS King 👑, Are you still using 7-1 + Sass Kevin or experimenting with something new?

[GbpsGbps-vnjy]

@Kevin Powell - Is it possible to start showing the element positions in the next video with the following code:

* { outline: 2px solid red; outline-offset: -2px; }

Thanks in advance