Responsive Fluid Sizing System using CSS Clamp


Related:
Bricks vs Elementor – why we switched
Web page layout – with CSS flexbox and Bricks
Website Mockup Size Guide


Overview

When building fluid mobile responsiveness into a website, values are scaled down as the device’s viewport width approaches the minimum device size, somewhere between 320px and 375px.

However not everything scales at the same rate. For example large heading sizes scale down at a greater ratio when compared with paragraph sizes which often don’t scale at all. Therefore several different scales using different ratios are needed.

The system outlined here uses a small set of ratios which can be applied to any value to achieve fluid responsive sizing.

Demo usage

For example to achieve borders which start at 30px on a laptop and end at 18px on a phone, you would choose the base-6 variable and multiply it by the larger value, like so: 

calc(var(--base-6) * 30)

We’re using the base-6 variable because 18 / 30 = 0.6.

Setting it up

We’ll start by setting up a few ratio variables: base-6, base-7, base-75, base-8, base-9

The reason we only need a few of these formulas is because there are relatively few needed. 

Looking at the ratios for the font sizes below we can see that by rounding the ratios off to 0.6, 0.7, 0.75, 0.8, and 0.9, this would be sufficient to scale sizes down to values at, or very close to the required mobile sizes.

Creating the variables

Starting with the 0.6 ratio variable which we’re calling base-6, go to the Utopia Clamp Calculator and make sure your viewport min and max widths are set correctly. We’re using 320px for min and 1292px for max in our case.

Now set your @max value to 1, and the @min value to 0.6.

Add this variable to the website :root in the main stylesheet with the name base-6 and the value copied from the output. It’s important not to have a full-stop (period) character in the name, so make sure not to use the generated names. Repeat this for each ratio needed.

Here is a complete set for the values mentioned in this tutorial with a few extra values thrown in.

:root {
  --base-6: clamp(0.0375rem, 0.0293rem + 0.0412vw, 0.0625rem);
  --base-65: clamp(0.0406rem, 0.0334rem + 0.036vw, 0.0625rem);
  --base-7: clamp(0.0438rem, 0.0376rem + 0.0309vw, 0.0625rem);
  --base-75: clamp(0.0469rem, 0.0417rem + 0.0257vw, 0.0625rem);
  --base-8: clamp(0.05rem, 0.0459rem + 0.0206vw, 0.0625rem);
  --base-85: clamp(0.0531rem, 0.05rem + 0.0154vw, 0.0625rem);
  --base-9: clamp(0.0563rem, 0.0542rem + 0.0103vw, 0.0625rem);
  --base-95: clamp(0.0594rem, 0.0583rem + 0.0051vw, 0.0625rem);
}

If you’re using a page builder with variables manager like Bricks, then you can add these one by one.

Using the variables

Divide the required min (mobile) value by the max (laptop) value to get the ratio. Select the base- variable that comes closest to this.

For example if you have a font sizeof 72px on laptops that needs to be 54px on mobile, then divide 54 by 72. The ratio is 0.75, so select base-75 as the variable.

Now modify the variable as follows:

calc(var(--base-75) * 72)

We hope you find this system useful!


Related:
Bricks vs Elementor – why we switched
Web page layout – with CSS flexbox and Bricks
Website Mockup Size Guide

Table of ContentsToggle Table of Content

Related Articles

Case Study: Guardian Validator

Introduction Guardian Validator is dedicated to supporting the decentralization of the Solana blockchain. They provide a high-performance, ethical, and safe staking service. Guardian Validator utilizes

Read More »

Web Development and WordPress FAQs

Web development is the activity of working with web browser technologies, such as writing code in the browser-side languages of HTML, CSS, and JavaScript, or server technologies such as PHP, MySQL, Ruby, Python etc.

Read More »