Responsive Website with only 1 CSS PROPERTY
Create a Responsive Website with one CSS property. Let’s see how it’s done. 🤔
Consider this template for example without apply CSS property🖥
clamp() CSS function we can create a responsive website with only one property.
Now add the magic CSS
clamp(minimum, preferred, maximum);
Here is! you are done✌
clamp() works by "clamping", or restricting, a flexible value between a minimum and a maximum range.
Here’s how to use it:
- minimum value: E.g.
- flexible value: E.g.
- maximum value: E.g.
font-size: clamp(16px, 5vw, 34px);
In this example, the
font-size value will be
5% of the viewport width. But only if that value is bigger than
16px and smaller than
For instance, if your viewport width is
5vw value will be equal to
15px. However, you clamped that
font-size value to a minimum of
16px, so that is what is going to be.
On the other hand, if your viewport width is
5vw will be a whooping
70px! But luckily you clamped that maximum value to
34px, so it won't grow past that.
I can add this code For this template…
width: clamp(15vw, 800%, 100%);
font-size: clamp(20px, 5vw, 35px);
font-size: clamp(10px, 4vw, 20px);
And literally, any other property that accepts a length, frequency, angle, time, percentage, number, or integer
The whole idea of this post was inspired and taught by Mr. Dip Vachhani.