loading...
Cover image for Responsive Website with only 1 CSS PROPERTY 🥳

Responsive Website with only 1 CSS PROPERTY 🥳

dip15739 profile image Dip Vachhani ・2 min read

Create a Responsive Website with a one CSS property. Let’s see how it's done. 🤔

Consider this template for example without apply css property🖥

Using The 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✌

Explanation

clamp() works by "clamping", or restricting, a flexible value between a minimum and a maximum range.

Here's how to use it:

  1. minimum value: E.g. 16px
  2. flexible value: E.g. 5vw
  3. maximum value: E.g. 34px
h1 {
  font-size: clamp(16px, 5vw, 34px);
}

In this example, the h1 font-size value will be 5% of the viewport width. But only if that value is bigger than 16px and smaller than 34px.

For instance, if your viewport width is 300px, your 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 1400px, you 5vw will be a whooping 70px! But luckily you clamped that maximum value to 34px, so it won't grow past that.

(◔‿◔)!☞ Live Demo

I can add this code For this template...

img {
  width: clamp(15vw, 800%, 100%);
}
h1 {
  font-size: clamp(20px, 5vw, 35px);
}
p {
  font-size: clamp(10px, 4vw, 20px);
}

And literally, any other property that accepts a length, frequency, angle, time, percentage, number, or integer

Discussion

pic
Editor guide
Collapse
kunukn profile image
Kunuk Nykjær

clamp is good. However I probably would refrain from setting a font-size to e.g. 5vw.
Then you can't easily Zoom in or Zoom out. The font-size stays the same.

Imagine if the screen is hard to read and you zoom in to increase the size. The text size does not update.

Collapse
milan090 profile image
Milan

Good point

Collapse
thomasbnt profile image
Thomas Bnt

Very nice hack 👍

Collapse
rajasekharguptha profile image
Rajasekhar Guptha

Excellent 💙

Collapse
jan250697 profile image
Sw_jhony

Woo, it's cool.

Collapse
nyanyiwast profile image
Sedrick Tacool

Great. Very helpful!

Collapse
norudah profile image
Romain Pierucci

What a lazy trick... love it :D

Collapse
mdeveloper profile image
mdeveloper

COOOOL...

Collapse
nikhil27b profile image
Nikhil27bYt

This looks cool

Collapse
doterlin profile image
Collapse
nikme profile image
Nikola

minmax has left the chat