DEV Community: SatyamTripathi

Bulma CSS Framework: Getting Started Guide

SatyamTripathi — Tue, 10 Oct 2023 07:51:53 +0000

An interactive and responsive website provides a better user experience on all browsers, devices, and operating systems, engaging users and encouraging them to spend more time on the site.

According to a report by Forbes, usеrs judgе wеbsitеs within a mеrе 0.05 sеconds. This highlights the crucial role of impactful wеb dеsign. A wеll-dеsignеd, usеr-friеndly wеbsitе has thе powеr to captivatе visitors, rеtain thеir attеntion, and еvеn convеrt thеm into customеrs.

When users can access all of the website’s features on any device without any issues, such websites are more likely to rank higher in search results, which can increase traffic to the website. Key KPIs like average time spent on a page, bounce rate, sessions, conversion rate, etc., are all interconnected with the website experience. The better the web experience, the higher the time spent on the site, which might lead to increased conversions.

The web experience can be better if developers can import only what they need, developers can style the web pages without writing a single line of JavaScript code, and a lot more. This all can be done by using the Bulma CSS framework.

In this blog, we will dive deep into the Bulma CSS framework and explore how to use Bulma in your project. The learnings from this blog will further help you build a feature-rich website or mobile application with minimal effort.

Without further ado, let’s get started.

Looking for a tool to generate random text? Use our free online Random Character Generator to generate random characters for all your purposes. Try it out today.

What is Bulma CSS?

Bulma is a free, open-source, and lightweight CSS framework based on the CSS Flexbox layout. It provides CSS classes to help you style your HTML code, allowing developers to implement CSS on web pages more efficiently than plain CSS.

The main advantage of using Bulma CSS is that it is built on the Flexbox layout. This CSS layout model automatically adjusts the width of a page element to best fill the available space based on the width of its container without using many float and position properties in the CSS code.

Bulma is open-source, and the project is hosted on GitHub. It is compatible with recent versions of Chrome, Edge, Firefox, Opera, and Safari, but Internet Explorer (10+) is only partially supported. Bulma uses Autoprefixer to make Flexbox features compatible with earlier browser versions.

Shown below is the browser compatibility of the Bulma framework. This indicates that users can get a uniform web experience when it is opened across different browsers (and browser versions).

The below graph shows the distribution of organizations using Bulma. The computer software company is at the top, followed by IT and services. The hospital and healthcare industry use Bulma in very fewer numbers.

Tired of using old colors? Get your creative juices flowing with our free online random color generator. Try our tool to find fresh new hues.

Features of Bulma CSS Framework

Bulma CSS framework has a lot of features, such as responsiveness (elements can adjust to fit any viewport size). This framework is modular, which means you can import only what you need. You can style the webpage without writing a single line of JavaScript code. Also, the Bulma framework supports a massive library of interactive elements.

Responsiveness

Bulma CSS Framework is a mobile-first CSS framework that lets you build a responsive design for mobile, tablet, desktop, etc. Its built-in components are designed to be responsive, which means elements will move and adjust to fit any screen or viewport size.

The columns in Bulma are stacked on top of each other, and the navigation menu is hidden. The children of the level component are also stacked vertically.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Platforms</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <!-- Header with logo and heading -->
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns ">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Platform</h1>
            </div>
          </div>
        </div>
      </div>
    </header>


    <!-- Pricing plans -->
    <section class="section">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-one-third">
            <div class="card has-background-primary-dark">
              <div class="card-content has-text-white">
                <div class="content">
                  <h4 class="title is-4 has-text-white">Playwright Testing</h4>
                  <p class="subtitle is-5 has-text-white">View Documentation</p>
                  <p>Run Playwright scripts on cloud-based infrastructure.</p>
                </div>
              </div>
            </div>
          </div>


          <div class="column is-one-third">
            <div class="card has-background-info-dark">
              <div class="card-content has-text-white">
                <div class="content">
                  <h4 class="title is-4 has-text-white">Selenium Testing</h4>
                  <p class="subtitle is-5 has-text-white">View Documentation</p>
                  <p>Run Selenium scripts on cloud-based infrastructure.</p>
                </div>
              </div>
            </div>
          </div>


          <div class="column is-one-third">
            <div class="card has-background-danger-dark">
              <div class="card-content has-text-white">
                <div class="content">
                  <h4 class="title is-4 has-text-white">Cypress Testing</h4>
                  <p class="subtitle is-5 has-text-white">View Documentation</p>
                  <p>Run Cypress scripts on cloud-based infrastructure.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

Output:

In the image below, columns are stacked on top of each other.

Columns are adjusted according to the change in the device, as shown below.

The above output has been rendered on LT Browser 2.0, a complimentary tool by the LambdaTest platform.

Need random dates? Our online Random Date Generator tool generates random dates for your projects. Choose a start and end date, and let our tool do the rest.

LT Browsеr 2.0 is a dеv-friеndly browsеr dеsignеd spеcifically for building, tеsting, and dеbugging mobilе wеbsitеs. It lеts you tеst wеbsitе pеrformancе on various mobilе dеvicе viеwports. Morеovеr, you can еvеn customizе thе viewport rеsolution to tеst your wеbsitеs, saving thеsе sеttings for futurе rеfеrеncе.

With LT Browsеr 2.0, you can еxplorе and assеss your wеbsitеs on a widе rangе of scrееn rеsolutions, including dеsktops, mobilеs, tablеts, and laptops. To get started, check our documentation on LT Browser 2.0

Subscribe to the LambdaTest YouTube Channel and stay up to date with the latest tutorials around Selenium testing, Cypress testing, and more.

<!DOCTYPE html>
<html>
  <head>
    <title>Platforms</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <!-- Header with logo and heading -->
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns ">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Platform</h1>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Pricing plans -->
    <section class="section">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-one-third">
            <div class="card has-background-primary-dark">
              <div class="card-content has-text-white">
                <div class="content">
                  <h4 class="title is-4 has-text-white">Playwright Testing</h4>
                  <p class="subtitle is-5 has-text-white">View Documentation</p>
                  <p>Run Playwright scripts on cloud-based infrastructure.</p>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card has-background-info-dark">
              <div class="card-content has-text-white">
                <div class="content">
                  <h4 class="title is-4 has-text-white">Selenium Testing</h4>
                  <p class="subtitle is-5 has-text-white">View Documentation</p>
                  <p>Run Selenium scripts on cloud-based infrastructure.</p>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card has-background-danger-dark">
              <div class="card-content has-text-white">
                <div class="content">
                  <h4 class="title is-4 has-text-white">Cypress Testing</h4>
                  <p class="subtitle is-5 has-text-white">View Documentation</p>
                  <p>Run Cypress scripts on cloud-based infrastructure.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

Above, we have seen that as the viewport size changes, the arrangement of columns has also changed, for the mobile device viewports, the columns were stacked on top of each other, but for the desktop, the columns became horizontal.

To achiеvе a horizontal layout for columns or lеvеl componеnts that works consistently across all viеwport sizеs, you can utilizе thе is-mobilе modifiеr.

<div class="columns is-centered is-mobile">

As shown in the image below, the horizontal layout is the same across all the viewport sizes. This happens because we use the is-mobile modifier. The is-mobile modifier can be used to make the website looks good and easy to use on mobile device viewports.

Before *is-mobile:*

The columns are stacked on top of each other when we are not using the is-mobile modifier.

After *is-mobile:*

<!DOCTYPE html>
<html>
  <head>
    <title>Platforms</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <!-- Header with logo and heading -->
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns ">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Platform</h1>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Pricing plans -->
    <section class="section">
      <div class="container">
        <div class="columns is-centered is-mobile">
          <div class="column is-one-third">
            <div class="card has-background-primary-dark">
              <div class="card-content has-text-white">
                <div class="content">
                  <h4 class="title is-4 has-text-white">Playwright Testing</h4>
                  <p class="subtitle is-5 has-text-white">View Documentation</p>
                  <p>Run Playwright scripts on cloud-based infrastructure.</p>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card has-background-info-dark">
              <div class="card-content has-text-white">
                <div class="content">
                  <h4 class="title is-4 has-text-white">Selenium Testing</h4>
                  <p class="subtitle is-5 has-text-white">View Documentation</p>
                  <p>Run Selenium scripts on cloud-based infrastructure.</p>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card has-background-danger-dark">
              <div class="card-content has-text-white">
                <div class="content">
                  <h4 class="title is-4 has-text-white">Cypress Testing</h4>
                  <p class="subtitle is-5 has-text-white">View Documentation</p>
                  <p>Run Cypress scripts on cloud-based infrastructure.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

Modularity

Bulma CSS framework is fully modular, where you can import only what you need. Bulma consists of 39 .sass files that you can import individually. These files are located in the bulma/sass/grid folder.

Some of the .saas files are:

FILE NAME	DESCRIPTION
button.sass	To import the button style
card.sass	To import the card style
checkbox.sass	To import the checkbox
columns.sass	To import the columns
container.sass	To import the containers

When you import the specific file needed for your project, the amount of code will be reduced in the CSS file. This will enable the web page to load faster, improving both load times and render time. So, if the web page loads faster, this will enhance the user experience, and the chances of conversion will be increased.

For example, if you only want to use the button styles in your project, you can import the button styles directly from the Bulma framework by adding the following line to your own Sass or SCSS file.

@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/elements/button.sass"

<!DOCTYPE html>
<html>
  <head>
    <title>My Basic Pricing Page</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <!-- Header with logo and heading -->
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Pricing</h1>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Pricing plans -->
    <section class="section">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Basic</h4>
                  <p class="subtitle is-5">$10/month</p>
                  <p>Basic Features Only</p>
                  <a href="#" class="button">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Standard</h4>
                  <p class="subtitle is-5">$20/month</p>
                  <p>Basic & Advanced Features</p>
                  <a href="#" class="button">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Premium</h4>
                  <p class="subtitle is-5">$30/month</p>
                  <p>All Premium Features</p>
                  <a href="#" class="button">Sign Up</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

Need decimal fractions for your project or testing? Use our free and fast online Random Fraction Generator to generate random decimal fractions in seconds.

No JavaScript

You can use Bulma to style your web pages without writing a single line of JavaScript code. This makes Bulma a lightweight and easy-to-use CSS framework, especially for developers who prefer to focus more on styling than complex scripting.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Platforms</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <!-- Header with logo and heading -->
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Platform</h1>
            </div>
          </div>
        </div>
      </div>
    </header>


    <section class="section">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Playwright Testing</h4>
                  <p class="subtitle is-5">View Documentation</p>
                  <p>Run Playwright scripts on cloud-based infrastructure.</p>
                </div>
              </div>
            </div>
          </div>


          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Selenium Testing</h4>
                  <p class="subtitle is-5">View Documentation</p>
                  <p>Run Selenium scripts on cloud-based infrastructure.</p>
                </div>
              </div>
            </div>
          </div>


          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Cypress Testing</h4>
                  <p class="subtitle is-5">View Documentation</p>
                  <p>Run Cypress scripts on cloud-based infrastructure.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

Output:

As shown below, the layout is fully responsive and adapts to different screen sizes without requiring any JavaScript code.

<!DOCTYPE html>
<html>
  <head>
    <title>Platforms</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <!-- Header with logo and heading -->
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Platform</h1>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Pricing plans -->
    <section class="section">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Playwright Testing</h4>
                  <p class="subtitle is-5">View Documentation</p>
                  <p>Run Playwright scripts on cloud-based infrastructure.</p>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Selenium Testing</h4>
                  <p class="subtitle is-5">View Documentation</p>
                  <p>Run Selenium scripts on cloud-based infrastructure.</p>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Cypress Testing</h4>
                  <p class="subtitle is-5">View Documentation</p>
                  <p>Run Cypress scripts on cloud-based infrastructure.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

Massive Library of Interactive Elements

Bulma provides many customizable components to create and customize website layouts and styles quickly. You don’t have to write complex CSS from scratch; instead, you can use predefined classes and components to achieve the desired look and functionality.

Bulma also provides helper classes to create more complex layouts and styles. For example, let’s say you have a div element in your HTML file and want to apply custom styling. You can use the helper classes to modify the margin, padding, background color, etc., of the div element.

Helper classes in Bulma CSS provide convenient options to style elements without having to write custom CSS rules. Below are some helper classes we are using:

HELPER CLASSES	DESCRIPTION
has-text-centered	Center text inside the div in the horizontal direction.
has-background-info	Set the background color of the div to a light green color.
p-5	Add a padding of size 5 to all sides of the div.
m-5	Add a margin of size 5 to all sides of the div.
title is-4	Title of heading 4.
subtitle-is-5	Subtitle of heading 5.

Code:

<div class="column is-one-third">
  <div class="card has-text-centered has-background-primary m-5 p-3">
    <div class="card-content">
      <div class="content">
        <h4 class="title is-4">Playwright Testing</h4>
        <p class="subtitle is-5">View Documentation</p>
        <p>Run Playwright scripts on cloud-based infrastructure.</p>
      </div>
    </div>
  </div>
</div>

Need accurate decimal values? Look no further! Our generator can create random decimals with just a few clicks. Try it out now and see for yourself.

Getting Started with Bulma CSS

To use Bulma in your project, you must first set it up. Setting up Bulma is super easy. You can do a setup in several ways. You can use a CDN, install the NPM package, download the GitHub release, and clone the GitHub repository.

To use a CDN, you can directly import it using the below code block. Include the code block below in the HTML file’s < head > element.

<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    />

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Bulma CSS</title>


    <!--Bulma CDN-->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <div class="container">
      <h1 class="title">Welcome to Bulma CSS</h1>
    </div>
  </body>
</html>

To install the NPM package, run the below command in your terminal.


npm install bulma

Now download the GitHub release of Bulma.

To clone the Bulma GitHub Repository, run the below command in your terminal, and then include the “bulma/css/bulma.css” in the code.

git clone https://github.com/jgthms/bulma.git

Exploring Bulma’s Components and Layouts

Bulma uses HTML classes to style elements on a web page. It relies heavily on class-based syntax to simplify the process of applying styles to HTML elements. To style an element on a web page, simply add one or more classes inside the element’s HTML tag.

Let’s take a look at some examples.

Buttons

To create a button using Bulma, simply add the “button” class to your HTML button element like this:

<button class="button">Click me!</button>

By adding the button class in the HTML element, Bulma recognizes the button class and applies some basic styling.


<a href="#" class="button">Sign Up</a>

<!DOCTYPE html>
<html>
  <head>
    <title>My Basic Pricing Page</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <!-- Header with logo and heading -->
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Pricing</h1>
            </div>
          </div>
        </div>
      </div>
    </header>

    <section class="section">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Basic</h4>
                  <p class="subtitle is-5">$10/month</p>
                  <p>Basic Features Only</p>
                  <a href="#" class="button">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Standard</h4>
                  <p class="subtitle is-5">$20/month</p>
                  <p>Basic & Advanced Features</p>
                  <a href="#" class="button">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Premium</h4>
                  <p class="subtitle is-5">$30/month</p>
                  <p>All Premium Features</p>
                  <a href="#" class="button">Sign Up</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

To enhance the style of your button, you can use Bulma modifiers. Bulma provides modifier classes that apply alternative styles to elements. The modifier class name starts with ‘is-‘ or ‘has-‘ followed by a style name.

For example, let’s take a look at the is-rounded modifier. This modifier gives your button a rounded appearance at the corners.

<a href="#" class="button is-rounded">Sign Up</a>

<!DOCTYPE html>
<html>
  <head>
    <title>My Basic Pricing Page</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <!-- Header with logo and heading -->
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Pricing</h1>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Pricing plans -->
    <section class="section">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Basic</h4>
                  <p class="subtitle is-5">$10/month</p>
                  <p>Basic Features Only</p>
                  <a href="#" class="button is-rounded">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Standard</h4>
                  <p class="subtitle is-5">$20/month</p>
                  <p>Basic & Advanced Features</p>
                  <a href="#" class="button is-rounded">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Premium</h4>
                  <p class="subtitle is-5">$30/month</p>
                  <p>All Premium Features</p>
                  <a href="#" class="button is-rounded">Sign Up</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

Modifiers can be used to adjust the colors and shading of your button. For example, ‘is-success’ will give your button a green appearance, ‘is-warning’ will give it a light yellow look, ‘is-danger’ will give it a red appearance, etc.

<a href="#" class="button is-rounded is-danger">Sign Up</a>
<a href="#" class="button is-rounded is-warning">Sign Up</a>
<a href="#" class="button is-rounded is-success">Sign Up</a>

<!DOCTYPE html>
<html>
  <head>
    <title>My Basic Pricing Page</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <!-- Header with logo and heading -->
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Pricing</h1>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Pricing plans -->
    <section class="section">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Basic</h4>
                  <p class="subtitle is-5">$10/month</p>
                  <p>Basic Features Only</p>
                  <a href="#" class="button is-rounded is-danger">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Standard</h4>
                  <p class="subtitle is-5">$20/month</p>
                  <p>Basic & Advanced Features</p>
                  <a href="#" class="button is-rounded is-warning">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Premium</h4>
                  <p class="subtitle is-5">$30/month</p>
                  <p>All Premium Features</p>
                  <a href="#" class="button is-rounded is-success">Sign Up</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

Multiple modifier classes can be applied to the same element. For example, you can use the ‘is-outlined’ modifier to apply an outlined style to an element. The ‘is-outlined’ class removes the background color of the button and replaces it with an outline.

<a href="#" class="button is-rounded is-danger is-outlined">Sign Up</a>
<a href="#" class="button is-rounded is-warning is-outlined">Sign Up</a>
<a href="#" class="button is-rounded is-success is-outlined">Sign Up</a>

<!DOCTYPE html>
<html>
  <head>
    <title>My Basic Pricing Page</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <!-- Header with logo and heading -->
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Pricing</h1>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Pricing plans -->
    <section class="section">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Basic</h4>
                  <p class="subtitle is-5">$10/month</p>
                  <p>Basic Features Only</p>
                  <a href="#" class="button is-rounded is-danger is-outlined">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Standard</h4>
                  <p class="subtitle is-5">$20/month</p>
                  <p>Basic & Advanced Features</p>
                  <a href="#" class="button is-rounded is-warning is-outlined">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Premium</h4>
                  <p class="subtitle is-5">$30/month</p>
                  <p>All Premium Features</p>
                  <a href="#" class="button is-rounded is-success is-outlined">Sign Up</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

To change the text color of your button, you can use the ‘has’ modifier. For example, the ‘has-text-success’ modifier will make the text look green, ‘has-text-grey’ will make the text gray, and so on.

<a href="#" class="button has-text-danger">Sign Up</a>
<a href="#" class="button has-text-warning">Sign Up</a>
<a href="#" class="button has-text-success">Sign Up</a>

<!DOCTYPE html>
<html>
  <head>
    <title>My Basic Pricing Page</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <!-- Header with logo and heading -->
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Pricing</h1>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Pricing plans -->
    <section class="section">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Basic</h4>
                  <p class="subtitle is-5">$10/month</p>
                  <p>Basic Features Only</p>
                  <a href="#" class="button has-text-danger">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Standard</h4>
                  <p class="subtitle is-5">$20/month</p>
                  <p>Basic & Advanced Features</p>
                  <a href="#" class="button has-text-warning">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Premium</h4>
                  <p class="subtitle is-5">$30/month</p>
                  <p>All Premium Features</p>
                  <a href="#" class="button has-text-success">Sign Up</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

Need a global unique identifier? Generate random GUIDs quickly and easily with our free online Random GUID Generator tool in seconds. Get a new GUID every time.

To change the button’s background color, you can use the ‘has’ modifier. For example, ‘has-background-white’ will make the background white, ‘has-background-success’ will make the background green, and so on.

<a href="#" class="button has-background-danger">Sign Up</a>
<a href="#" class="button has-background-warning">Sign Up</a>
<a href="#" class="button has-background-success">Sign Up</a>

<!DOCTYPE html>
<html>
  <head>
    <title>My Basic Pricing Page</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <!-- Header with logo and heading -->
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Pricing</h1>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Pricing plans -->
    <section class="section">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Basic</h4>
                  <p class="subtitle is-5">$10/month</p>
                  <p>Basic Features Only</p>
                  <a href="#" class="button has-background-danger">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Standard</h4>
                  <p class="subtitle is-5">$20/month</p>
                  <p>Basic & Advanced Features</p>
                  <a href="#" class="button has-background-warning">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Premium</h4>
                  <p class="subtitle is-5">$30/month</p>
                  <p>All Premium Features</p>
                  <a href="#" class="button has-background-success">Sign Up</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

You can control the button size by using some modifiers such as ‘is-small’, ‘is-normal’, ‘is-large’, etc.

<a href="#" class="button is-small">Sign Up</a>
<a href="#" class="button is-normal">Sign Up</a>
<a href="#" class="button is-medium">Sign Up</a>

<!DOCTYPE html>
<html>
  <head>
    <title>My Basic Pricing Page</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <!-- Header with logo and heading -->
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Pricing</h1>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Pricing plans -->
    <section class="section">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Basic</h4>
                  <p class="subtitle is-5">$10/month</p>
                  <p>Basic Features Only</p>
                  <a href="#" class="button is-small">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Standard</h4>
                  <p class="subtitle is-5">$20/month</p>
                  <p>Basic & Advanced Features</p>
                  <a href="#" class="button is-normal">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Premium</h4>
                  <p class="subtitle is-5">$30/month</p>
                  <p>All Premium Features</p>
                  <a href="#" class="button is-medium">Sign Up</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

You can transform the text by using modifiers such as ‘is-capitalized’, ‘is-lowercase’, ‘is-uppercase’, etc.

<!DOCTYPE html>
<html>
  <head>
    <title>Pricing Page</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <!-- Header with logo and heading -->
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Pricing</h1>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Pricing plans -->
    <section class="section">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Basic</h4>
                  <p class="subtitle is-5">$10/month</p>
                  <p>Basic Features Only</p>
                  <a href="#" class="button is-uppercase">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Standard</h4>
                  <p class="subtitle is-5">$20/month</p>
                  <p>Basic & Advanced Features</p>
                  <a href="#" class="button is-italic">Sign Up</a>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-one-third">
            <div class="card">
              <div class="card-content">
                <div class="content">
                  <h4 class="title is-4">Premium</h4>
                  <p class="subtitle is-5">$30/month</p>
                  <p>All Premium Features</p>
                  <a href="#" class="button is-underlined">Sign Up</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

You can also change the text weight, font family, and so on by similarly using different modifiers.

Need to generate random text based on a regular expression for testing and generating sample data.? Use our online tool to create random text from RegEx.

Progress Bar

To add a progress bar using Bulma, you can use the progress class on an < progress > HTML element. The value attribute sets the current progress value, and the max attribute sets the maximum progress value.

You can use modifiers to add more effects to the progress bar, just like with buttons. For example, you can add “is-success” or “is-danger” to change the color of the progress bar. To create the motion effect, exclude the “value” attribute from the HTML element. To adjust the size of the progress bar, you can apply the modifiers “is-small”, “is-medium”, and so on.

<!DOCTYPE html>
<html>
  <head>
    <title>Bulma CSS</title>

    <!--Bulma CDN-->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Task Status</h1>
            </div>
          </div>
        </div>
      </div>
    </header>
    <h3 class="subtitle is-4 has-text-warning-dark mt-3 ml-3">
      Task deadline approaching 
    </h3>
    <progress class="progress is-warning ml-3" value="30" max="100"></progress>
    <h3 class="subtitle is-4 has-text-danger mt-3 ml-3">Error encountered!</h3>
    <progress class="progress is-danger ml-3" value="40" max="100"></progress>
    <h3 class="subtitle is-4 has-text-info mt-3 ml-3">Task in progress...</h3>
    <progress class="progress is-info ml-3" max="100"></progress>
    <h3 class="subtitle is-4 has-text-success mt-3 ml-3">
      Task successfully completed
    </h3>
    <progress class="progress is-success ml-3" value="100" max="100"></progress>
  </body>
</html>

User Input

Bulma provides a set of form control elements to collect user-inputted information. Some of these elements include text input, textarea, checkbox, radio buttons, and dropdown menus.

<form class="ml-2">
    <div class="field">
      <label class="label">Name</label>
      <div class="control">
        <input class="input is-success" type="text" placeholder="Enter your name">
      </div>
    </div>
        <div class="field">
      <label class="label">Email</label>
      <div class="control">
        <input class="input is-success" type="email" placeholder="Enter your email address">
      </div>
    </div>
    <div class="field">
      <label class="label">Comments</label>
      <div class="control">
        <textarea class="textarea" placeholder="Enter your message"></textarea>
      </div>
    </div>
    <div class="field">
      <label class="label">Language</label>
      <div class="control">
        <div class="select">
          <select>
            <option>Select language</option>
            <option>Hindi</option>
            <option>English</option>
            <option>French</option>
          </select>
        </div>
      </div>
    </div>
  <div class="field">
    <label class="label">Gender</label>
    <div class="control">
      <label class="radio">
        <input type="radio" name="gender" value="male">
        Male
      </label>
      <label class="radio">
        <input type="radio" name="gender" value="female">
        Female
      </label>
      <label class="radio">
        <input type="radio" name="gender" value="other">
        Other
      </label>
    </div>
  </div>

    <div class="field">
      <div class="control">
        <label class="checkbox">
          <input type="checkbox">
           I agree to the terms and conditions.
        </label>
      </div>
    </div>
    <div class="field">
      <div class="control">
        <button class="button is-success">Submit</button>
      </div>
    </div>
  </form>

<!DOCTYPE html>
<html>
  <head>
    <title>Bulma CSS</title>

    <!--Bulma CDN-->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Create LambdaTest Account</h1>
            </div>
          </div>
        </div>
      </div>
    </header>
    <form class="ml-2">
  <div class="field">
    <label class="label">Name</label>
    <div class="control">
      <input class="input is-success" type="text" placeholder="Enter your name">
    </div>
  </div>
      <div class="field">
    <label class="label">Email</label>
    <div class="control">
      <input class="input is-success" type="email" placeholder="Enter your email address">
    </div>
  </div>
  <div class="field">
    <label class="label">Comments</label>
    <div class="control">
      <textarea class="textarea" placeholder="Enter your message"></textarea>
    </div>
  </div>
  <div class="field">
    <label class="label">Language</label>
    <div class="control">
      <div class="select">
        <select>
          <option>Select language</option>
          <option>Hindi</option>
          <option>English</option>
          <option>French</option>
        </select>
      </div>
    </div>
  </div>
<div class="field">
  <label class="label">Gender</label>
  <div class="control">
    <label class="radio">
      <input type="radio" name="gender" value="male">
      Male
    </label>
    <label class="radio">
      <input type="radio" name="gender" value="female">
      Female
    </label>
    <label class="radio">
      <input type="radio" name="gender" value="other">
      Other
    </label>
  </div>
</div>

  <div class="field">
    <div class="control">
      <label class="checkbox">
        <input type="checkbox">
         I agree to the terms and conditions.
      </label>
    </div>
  </div>
  <div class="field">
    <div class="control">
      <button class="button is-success">Submit</button>
    </div>
  </div>
</form>
  </body>
</html>

Column

Columns are a fundamental part of website layout and design, and building a column layout with Bulma is very simple:

Add a columns container
Add as many column elements as you want

You can set different widths for individual columns. Bulma provides several column width modifiers that can be added to one or more child column elements. The other columns will adjust their widths automatically.

In the Bulma CSS, columns width can be changed to various options like

is-one-quarter	1/4
is-one-third	1/3
is-half	1/2
is-two-thirds	2/3
is-three-quarters	3/4

To use these modifiers, you simply add the modifier class to the child column element:

Code:

<div class="columns is-multiline">
  <!-- Product 1 -->
  <div class="column">
    <div class="card is-one-quarter has-background-grey-light ml-2 mt-2">
      <div class="card-image">
        <figure class="image is-4by3">
          <img
            src="https://user-images.githubusercontent.com/69134468/235297320-094a5a83-eb06-4933-acf5-735081d22557.png"
            alt="Product 1"
          />
        </figure>
      </div>
      <div class="card-content">
        <p class="title is-4">Automated Browser Screenshot Testing</p>
        <p class="subtitle is-6">Free</p>
        <div class="content">
          <p>
            Take Instant Automated Screenshots Across Multiple Browsers In A
            Single Click.
          </p>
        </div>
      </div>
    </div>
  </div>


  <!-- Product 2 -->
  <div class="column">
    <div class="card is-one-quarter has-background-grey-light mt-2">
      <div class="card-image">
        <figure class="image is-4by3">
          <img
            src="https://user-images.githubusercontent.com/69134468/235297322-d7ca1ae4-7abd-41ce-adc5-ec3db2b134f0.png"
            alt="Product 2"
          />
        </figure>
      </div>
      <div class="card-content">
        <p class="title is-4">LT Browser 2.0</p>
        <p class="subtitle is-6">Free</p>
        <div class="content">
          <p>Next-gen browser to build, test & debug mobile websites.</p>
        </div>
      </div>
    </div>
  </div>


  <!-- Product 3 -->
  <div class="column">
    <div class="card is-one-quarter has-background-grey-light mt-2">
      <div class="card-image">
        <figure class="image is-4by3">
          <img
            src="https://user-images.githubusercontent.com/69134468/235297323-b72aa7db-0e28-41fc-9cb4-3597de62557f.png"
            alt="Product 3"
          />
        </figure>
      </div>
      <div class="card-content">
        <p class="title is-4">LT Debug</p>
        <p class="subtitle is-6">Free</p>
        <div class="content">
          <p>
            Debug web pages on-the-fly with nine essential debugging tools. This
            Chrome extension makes debugging any web page a breeze.
          </p>
        </div>
      </div>
    </div>
  </div>


  <!-- Product 4 -->
  <div class="column">
    <div class="card is-one-quarter has-background-grey-light mr-2 mt-2">
      <div class="card-image">
        <figure class="image is-4by3">
          <img
            src="https://user-images.githubusercontent.com/69134468/235297327-187e03a5-81c2-4657-851e-55efc10b569a.png"
            alt="Product 4"
          />
        </figure>
      </div>
      <div class="card-content">
        <p class="title is-4">AI-Powered Test Analytics</p>
        <p class="subtitle is-6">Free</p>
        <div class="content">
          <p>
            Assess high-impact quality issues with detailed Test Analytics &
            Observability Suite.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<!DOCTYPE html>
<html>
  <head>
    <title>Bulma CSS</title>

    <!--Bulma CDN-->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <header class="hero is-custom">
      <div class="hero-body">
        <div class="container">
          <div class="columns">
            <div class="column is-one-quarter">
              <img
                src="https://user-images.githubusercontent.com/69134468/235296390-11fdb2a0-2909-4ac1-af00-7def636965e1.png"
                alt="Your logo"
                class="image is-64x64"
              />
            </div>
            <div class="column">
              <h1 class="title is-3">Buy our Products</h1>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="columns is-multiline">
      <!-- Product 1 -->
      <div class="column">
        <div class="card is-one-quarter has-background-grey-light ml-2 mt-2">
          <div class="card-image">
            <figure class="image is-4by3">
              <img src="https://user-images.githubusercontent.com/69134468/235297320-094a5a83-eb06-4933-acf5-735081d22557.png" alt="Product 1" />
            </figure>
          </div>
          <div class="card-content">
            <p class="title is-4">Automated Browser Screenshot Testing</p>
            <p class="subtitle is-6">Free</p>
            <div class="content">
              <p>
                Take Instant Automated Screenshots Across Multiple Browsers In A Single Click.
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Product 2 -->
      <div class="column">
        <div class="card is-one-quarter has-background-grey-light mt-2">
          <div class="card-image">
            <figure class="image is-4by3">
              <img src="https://user-images.githubusercontent.com/69134468/235297322-d7ca1ae4-7abd-41ce-adc5-ec3db2b134f0.png" alt="Product 2" />
            </figure>
          </div>
          <div class="card-content">
            <p class="title is-4">LT Browser 2.0</p>
            <p class="subtitle is-6">Free</p>
            <div class="content">
              <p>
                Next-gen browser to build, test & debug
mobile websites.
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Product 3 -->
      <div class="column">
        <div class="card is-one-quarter has-background-grey-light mt-2">
          <div class="card-image">
            <figure class="image is-4by3">
              <img src="https://user-images.githubusercontent.com/69134468/235297323-b72aa7db-0e28-41fc-9cb4-3597de62557f.png" alt="Product 3" />
            </figure>
          </div>
          <div class="card-content">
            <p class="title is-4">LT Debug</p>
            <p class="subtitle is-6">Free</p>
            <div class="content">
              <p>
Debug web pages on-the-fly with nine essential debugging tools. This Chrome extension makes debugging any web page a breeze.
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Product 4 -->
      <div class="column">
        <div class="card is-one-quarter has-background-grey-light mr-2 mt-2">
          <div class="card-image">
            <figure class="image is-4by3">
              <img src="https://user-images.githubusercontent.com/69134468/235297327-187e03a5-81c2-4657-851e-55efc10b569a.png" alt="Product 4" />
            </figure>
          </div>
          <div class="card-content">
            <p class="title is-4">AI-Powered Test Analytics</p>
            <p class="subtitle is-6">Free</p>
            <div class="content">
              <p>
                Assess high-impact quality issues with detailed Test Analytics & Observability Suite.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Need realistic test data? Use our free online Test Data Generator tool to create realistic data for your testing needs. Get started now and save time and effort.

Best Practices for using Bulma CSS

Knowing the best practices for using Bulma allows you to leverage the framework effectively, such as you can leverage Bulma’s pre-built components, grid system, and styling classes to build a responsive website quickly. Let’s look at some of the best practices:

Follow the Grid System

Bulma provides a flexible grid system that helps create responsive layouts. To create a grid structure for a webpage, you can use the columns and column classes, along with other related classes such as is-three-quarters, is-two-thirds, is-half, and is-one-third.

<div class="columns">
  <div class="column is-half">
    <!-- First Column Content -->
  </div>
  <div class="column is-half">
    <!-- Second Column Content -->
  </div>
</div>

Use Bulma Classes

Bulma CSS provides a set of classes that you can use to style your HTML elements. Some of the classes are button, card, container, and nav. Use these classes to style your webpage. For example, use the button class to style a button element.

<button class="button">Click here</button>

Use Bulma Modifiers

Bulma offers a variety of modifiers that you can add to classes to modify their behavior without having to write a lot of custom CSS. These modifiers allow you to modify the responsiveness of the element, customize the look of Bulma elements, and so on.

Some modifiers, such as is-primary, is-info, is-success, is-warning, or is-danger, can be used to apply different color variations. Here is an example using the is-primary class:

<button class="button is-primary">Click here</button>

Follow Modularity

As discussed above, Bulma CSS is fully modular. This allows you to use individual components independently. Bulma makes it easy only to use the components you need for your project. This best practice can help you create clear, efficient, and maintainable code. Let’s say you only want the Bulma columns, you can import it directly.

@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/grid/columns.sass"

Use Responsive Design Features

Bulma offers built-in responsive design features to make your design optimal across different screen sizes. Bulma handles responsiveness through classes such as is-full-mobile, is-hidden-mobile, is-desktop, etc.

<!DOCTYPE html>
<html>
  <head>
    <title>Bulma CSS</title>


    <!--Bulma CDN-->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <div class="columns">
      <div class="column is-one-third is-full-mobile">
        <p>
          This column takes up one-third of the width on desktop and full width
          on mobile.
        </p>
      </div>
      <div class="column is-one-third is-full-mobile">
        <p>
          This column takes up one-third of the width on desktop and full width
          on mobile.
        </p>
      </div>
      <div class="column is-desktop is-one-third is-hidden-mobile">
        <p>
          This column takes up one-third of the width on desktop and is only
          visible in desktop screens, hidden on mobile
        </p>
      </div>
    </div>
  </body>
</html>

Optimizing Website Performance using Bulma CSS

In this section, we will discuss how you can optimize your website performance using the Bulma framework.

Use the Minified Version

When using Bulma CSS, always use the minified version (with the .min.css extension). Minified files are smaller in size and load faster. To include the minified version of Bulma CSS, you can use the following code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

The non-minified version of Bulma CSS looks something like this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.css">

Use the Modularity

Import only what you need. If you want to use the button on your webpage, only include the button style in your code. This will improve the loading time of a website and overall optimize the website’s performance.

@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/elements/button.sass"

Frequent DOM Manipulation

Frequent DOM manipulations can negatively impact website performance. If you make small changes, the browser has to re-render the page, and it can be costly.

CSS frameworks like Bulma can help reduce manipulations. These frameworks provide pre-built components and CSS classes that can help create an interactive UI without writing a lot of custom CSS.

Caching

The Bulma CSS framework can increase website performance by using caching. Bulma is known for its efficiency and lightweight nature, and its code is more optimized for caching. In comparison to custom CSS, Bulma CSS code can be cached better.

To increase cache performance, you can use minified CSS files and CDN support. Minified files are smaller and load faster, while a CDN (Content Delivery Network) is a network of servers distributed worldwide. When a user requests a CSS file, it is served from the nearest server, improving caching performance.

Minimizing HTTP requests

By minimizing HTTP requests, you can increase website performance. This will improve SEO ranking, user experience, and faster load times.

The Bulma CSS framework can optimize website performance. You can use minified files, which make files smaller and minimize HTTP requests. Additionally, you can use Bulma’s CDN support, which reduces request latency. Combining smaller files into a single file can also reduce the number of requests the browser has to make.

Bonus: Bulma vs. Bootstrap

Bulma and Bootstrap are popular CSS frameworks used to build responsive and mobile-first websites.

They are free and open-source CSS frameworks with some key differences.

Design

Bulma provides a modern and minimalist design that is easy to customize. It uses a simple and flexible grid system based on the CSS Flexbox module.

Bootstrap has a more traditional design with a heavy reliance on pre-built components such as buttons, forms, navigation menus, etc.

Let’s take a scenario where we want to customize the appearance of form input (font size & color).

With Bulma:

HTML:

<input class="input my-input" type="text" placeholder="Enter text">

CSS:

.my-input {
  font-size: 18px;
  color: blue;
}

We have added the custom class “my-input.” This code will customize our input form fields, such as setting the font size to 18px and the color to blue. You have direct control over the specific properties that you want to customize.

With Bootstrap:

HTML:

<input class="form-control my-input" type="text" placeholder="Enter text">

CSS:

.my-input {
  font-size: 18px !important;
  color: blue !important;
}

Same as Bulma, we have added a custom class called “my-input” to our input element. To override the default style and use our customizations, we used the “!important” declaration in CSS. This ensures that our custom styles take precedence over the default styles.

It is important to note that the use of “!important” should be done sparingly, as it can make your stylesheets difficult to maintain.

Flexibility

Both frameworks are suitable for creating responsive websites, but Bulma is more flexible than Bootstrap. Bulma’s styling is minimal, which means you have more control over the appearance of individual components, such as font size, color, etc.

Bootstrap has a lot of pre-built styles that are applied to elements by default, which can make it more challenging to customize the appearance of a component.

Same as above, it becomes challenging when it comes to customizing the default style of a Bootstrap element, but in the case of Bulma, it is more flexible.

Easy-to-learn syntax

Both Bulma and Bootstrap have easy-to-learn syntax, but they have slight differences in their approach. Bulma has a more straightforward and self-explanatory syntax. Bulma has simple and readable class names, such as .button or .title. It also has direct modifiers, such as .is-primary or .is-large, which makes it easy to understand and know their purpose.

The Bootstrap syntax may require consulting the documentation to fully grasp the class naming conventions.

Bulma:

<button class="button is-primary is-rounded is-large">Click here</button>

Bootstrap:

<button class="btn btn-primary rounded-lg btn-lg">Click here</button>

In both the above examples, the intention is to style the button with a primary color, rounded corners, and increased size. The Bulma syntax looks easy to understand, but the Bootstrap syntax looks abbreviated and requires some familiarity with the framework.

Community Support

Bootstrap is a popular framework with a large user base and support community. Therefore, finding solutions to advanced problems is more likely to be achieved with Bootstrap than with Bulma.

On StackOverflow, there have been over 3k questions asked about the Bulma CSS framework. Bulma has over 47.3k Stars on GitHub.

Need random text for your project? Our Lorem Ipsum Generator lets you easily generate filler text. Choose the number of paragraphs, words, or characters you need.

Conclusion

Bulma is a free, open-source, and lightweight CSS framework based on Flexbox layout. It provides CSS classes to help you style your HTML code, allowing developers to implement CSS on web pages more efficiently than plain CSS.

In this guide, we looked at the Bulma CSS framework in detail, its features and components, best practices for using Bulma, and how Bulma can help optimize website performance.

So, if developers have to import only what they need, developers have to style web pages without writing a single line of JavaScript code and more. This all can be done by using the Bulma CSS framework.

Demystifying CSS Min(), Max(), and Clamp() Functions

SatyamTripathi — Tue, 10 Oct 2023 05:41:35 +0000

A website that is interactive and responsive provides a better user experience on all devices. This engages users and encourages them to spend more time on the site. As per the report by NN Group, most users leave a webpage within 10 to 20 seconds, but a clear value proposition can make them stay longer. To make users remain for several minutes, you must communicate your value proposition clearly within the first 10 seconds.

When users can access all of the site’s features on any device without any issues, such websites are more likely to rank higher in search results. This can increase traffic to the website. Key KPIs like average time spent on a page, bounce rate, sessions, conversion rate, etc., are all interconnected with the website experience. The better the web experience, the higher the time spent on the site, which might lead to increased conversions.

Since your target users can access the website from a range of devices, it’s imperative to invest in improving the responsiveness and accessibility factors of the website. This is where you can leverage the benefits offered by CSS media queries and CSS min(), max(), and clamp() functions.

In this blog, we deep dive into the CSS min(), max(), and clamp() functions and explore how to use them for creating flexible & dynamic web layouts. The learnings of this blog will further help you improve the overall digital experience of your web product (or offering).

Without ado, let’s get started.

Want to convert your HTML code into BBCode? Look no further, Use our free online HTML to BBCode converter tool to convert your website’s HTML content to BBCode format

Introduction to CSS min(), max(), and clamp() functions

CSS provides various functions that make websites more responsive and dynamic. The CSS min(), max(), and clamp() functions can help keep your web designs responsive and flexible. Font size adjusts as per the viewport size of the device on which the website is being rendered. For this, you can use the CSS min(), max(), and clamp() functions to specify a range of font sizes that will adjust based on screen size. For example, if the screen is small, the font size would be set to a smaller size and vice versa.

The image below is taken from LT Browser 2.0.

LT Browser 2.0 is a dev-friendly Chromium-based browser to perform responsive testing across 53+ pre-installed device viewports for mobile, tablet, desktop, and laptops. It has several features that will make your responsive design development a breeze. Some include side-by-side comparisons, getting performance reports, generating JavaScript error reports, and much more.

Need to convert HTML to XML? Our HTML to XML converter is fast, easy to use, and completely free. Convert your HTML files to XML in just a few seconds

As you can see the above example of a website that adapts to any device viewports, whether a laptop, tablet, or phone, without creating any issues with the design. This website is designed to automatically adjust its text, images, layout, and other elements to fit any screen, making it dynamic and easy to use.

Min() returns a minimum value from the list of values passed to the function, which is used for setting the width, font size, etc., to the minimum value.
Max() returns the maximum value from a list of values passed in so that width, font size, etc., can be set to the maximum value.
Clamp() takes three comma-separated values: a minimum value, a preferred value, and a maximum value. It returns the preferred value if it’s within the range. Otherwise, it returns the minimum or maximum value accordingly.

Let’s dive deep into each of them in more detail.

What does the min() function do in CSS?

The CSS min() function returns a minimum value from a list of comma-separated values. It sets the minimum width, padding, font size, etc.

Syntax:

The min() function takes one or more values and compares them to obtain the minimum value. The following CSS code can be used to set the width of a box, and it uses the min() function to compare two values: 50vw (which represents 50% of the viewport width) and 400px.

As the viewport width changes, the 50vw value will also change, ensuring that the elements will never be smaller than either 400px or 50vw of the available viewport width, whichever is smaller.

CSS Viewports width is the width of the visible area on your screen when you open a webpage. It can differ based on the size of the devices (laptops, tablets, phones).

In the device below, you can see that the viewport width is 1366px. Therefore, 50% of 1366px would be 683px, and the minimum of 683px & 400px would be 400px, so that the box width would be 400px.

In the device below, the viewport width is 1024px, and 50% of the viewport width would be 512px. The minimum of 400px and 512px would be 400px so the box width will be set to 400px.

If you keep changing the viewport width, the box size will also change, as seen in the below device. For the below device, the viewport width is 414px, so 50% of the viewport width would be 207px. Now, the minimum of 207px & 400px would be 207px, so the box width will be set to 207px.

Make the conversion from YAML to JSON quick and easy with our free online converter YAML to JSON converter tool. No signup or installation required. Try it now

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <p>
    <code class="value"
      >width: min(<span class="max">50%</span>,
      <span class="min">400px</span>);</code
    >
  </p>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';

    checkWidth(rectWidth);
}

const checkWidth = (rectWidth) => {
    const minVal = parseInt(document.querySelector('.min').innerText, 10);

    if (rectWidth < minVal) {
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.max').classList.add('highlight');
    } else {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.min').classList.add('highlight');
    }
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .value {
    border-radius: 0px;
    padding: 0.5em 0.25em;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    width: min(50vw, 400px);
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

  .box {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <p>
    <code class="value"
      >width: min(<span class="max">50%</span>,
      <span class="min">400px</span>);</code
    >
  </p>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

The above code is trying to change the width of a rectangular box, but you can also change its height, font size, margin, padding, and more.

What does the max() function do in CSS?

The CSS max() function is a function that returns a maximum value from a list of comma-separated values. It is used to set the maximum width, padding, font size, etc.

Syntax:

The max() function takes one or more values and compares them to get the maximum value. The following CSS code can be used to set the width of a box, and it uses the max() function to compare two values: 45vw (which represents 45% of the viewport width) and 400px.

As the viewport width changes, the 45vw value will also change, ensuring that the elements will never be larger than either 400px or 45vw of the available viewport width, whichever is larger.

In the device below, you can see that the box width is 615px. When the viewport’s width is 1366px, 45% of 1366px would be around 615px. Therefore, the box width would be a maximum of 400px & 615px.

Now: in the below device, the viewport width is 1024px; if you calculate 45% of 1024px, it would be around 461px. The box width would be a maximum of 400px & 461px, i.e., 461px.

Similarly, in the below device, the viewport width is 414px, so if you find 45% of the viewport width (414px), it would be around 186px, but the maximum of 186px and 400px would be 400px so that the box width will set to 400px.

Looking for an easy way to convert your HTML files to JSON? Try our free online HTML to JSON converter tool to convert your HTML files to JSON format in seconds

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <p>
    <code class="value"
      >width: max(<span class="max">45%</span>,
      <span class="min">400px</span>);</code
    >
  </p>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';

    checkWidth(rectWidth);
}

const checkWidth = (rectWidth) => {
    const minVal = parseInt(document.querySelector('.min').innerText, 10);

    if (rectWidth > minVal) {
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.max').classList.add('highlight');
    } else {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.min').classList.add('highlight');
    }
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .value {
    border-radius: 0px;
    padding: 0.5em 0.25em;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    width: max(45vw, 400px);
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

  .box {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <p>
    <code class="value"
      >width: max(<span class="max">45%</span>,
      <span class="min">400px</span>);</code
    >
  </p>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

What does the clamp() function do in CSS?

Clamp() is a CSS function that allows you to set a value between a minimum and maximum range. Or, in simple terms, it will set the value within the lower and upper limits. The clamp() function takes three values: The first is a minimum value, the second is a preferred value, and the third is a maximum value.

The clamp() function will return the preferred value unless it exceeds the minimum value. If the preferred value exceeds the maximum value, it will return the maximum value, which means it will neither exceed the minimum or maximum value.

Syntax:

where

MIN: represents the minimum value
VAL: represents the preferred value
MAX: represents the maximum value.

Let’s consider an example for better understanding:

Suppose you are making a website. You want your main content to cover 50% of the area so that it does not become very narrow on smaller screens and not wide on larger screens. Therefore, you can set the minimum and maximum values according to available space. The width would be 250px to 400px, and it would not exceed 50% of the viewport width.

In the device below, you can see that the viewport width is 1366px. The 50% of the viewport width would be 683px. Since we have set the maximum value to 400px, the box width would be 400px.

Need to convert HTML data to CSV format? Use our HTML to CSV converter tool to convert your HTML data into CSV format quickly and easily. Try it out today.

In the below device, the viewport width is 1024px. Although 50% of the viewport width would be 512px, we have set the maximum value to 400px. Therefore, the box width cannot exceed 400px, resulting in a box width of 400px.

Similarly, in the device below, the viewport width is 414px. The 50% of the 414px would be 207px. But we have set the minimum value to 250px, so the box width would be 250px.

You might have considered how the clamp() function calculates its values. For example, clamp(250px, 50%, 400px) can be written as max(250px, min(50%, 400px).

<div class="parent">
  <div class="line"></div>
  <p>Viewport Width: <span class="viewport"></span></p>
  <div class="line"></div>
</div>

<p>
  <code class="value"
    >width: clamp(<span class="max">250px</span>, <span class="pref">50%</span>,
    <span class="min">400px</span>);</code
  >
</p>

<div class="rectangle">
  <p>Box Width: <span class="box"></span></p>
</div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';

    checkWidth(rectWidth);
}

const checkWidth = (rectWidth) => {
    const maxVal = parseInt(document.querySelector('.max').innerText, 10);
    const minVal = parseInt(document.querySelector('.min').innerText, 10);

    if (rectWidth === maxVal) {
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.pref').classList.remove('highlight');
        document.querySelector('.max').classList.add('highlight');
    } else if (rectWidth === minVal) {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.pref').classList.remove('highlight');
        document.querySelector('.min').classList.add('highlight');
    } else {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.pref').classList.add('highlight');
    }
}

updateValues();
window.onresize = updateValues;

body {
  font-family: "Gill Sans Extrabold", sans-serif;
  font-size: 20px;
  background-color: rgb(184, 206, 226);
  display: grid;
  place-content: center;
  text-align: center;
}

.value {
  border-radius: 0px;
  padding: 0.5em 0.25em;
}

.rectangle {
  background-color: rgb(171, 208, 222);
  height: 180px;
  width: clamp(250px, 50%, 400px);
  display: grid;
  place-content: center;
  justify-self: center;
  border: 2px solid rgb(85, 85, 233);
}

.box {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.viewport {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.highlight {
  background-color: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
}

.parent {
  font-size: 20px;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.line {
  height: 1px;
  width: 100%;
  background-color: blue;
}

.parent p {
  background: white;
  border: 2px solid blue;
  padding: 1rem;
}

body {
  font-family: "Gill Sans Extrabold", sans-serif;
  font-size: 20px;
  background-color: rgb(184, 206, 226);
  display: grid;
  place-content: center;
  text-align: center;
}

.value {
  border-radius: 0px;
  padding: 0.5em 0.25em;
}

.rectangle {
  background-color: rgb(171, 208, 222);
  height: 180px;
  width: clamp(250px, 50%, 400px);
  display: grid;
  place-content: center;
  justify-self: center;
  border: 2px solid rgb(85, 85, 233);
}

.box {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.viewport {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.highlight {
  background-color: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
}

.parent {
  font-size: 20px;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.line {
  height: 1px;
  width: 100%;
  background-color: blue;
}

.parent p {
  background: white;
  border: 2px solid blue;
  padding: 1rem;
}

So, to simplify the above code, we can break it down into simple code.

In the above code, we have separated the minimum and maximum width from the calc() function, making the code easier to understand and debug.

The calc() function in CSS allows you to perform simple arithmetic operations. You can use different units like pixels or percentages, and the function gives you a single value after evaluating the expression you provide.

Simplify the process of converting JSON to HTML with our efficient online JSON to HTML converter to convert your JSON data to HTML code quickly and easily.

In the below device, the box width is 800px, though the box-width should be greater than 800px according to the above code. We have also set that the width cannot exceed 800px (max-width: 800px).

In the below device, the width is between the minimum width (400px) and maximum width (800px), i.e., 492px. Here the width would be according to calc(50vw — 20px).

Similarly, in the below device, the box width is 300px, i.e., the minimum width.

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
   let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
  document.querySelector('.box').innerText = rectWidth + 'px';;
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

.rectangle {
  min-width: 300px;
  max-width: 800px;
  width: calc(50vw - 20px);
}

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

.rectangle {
  min-width: 300px;
  max-width: 800px;
  width: calc(50vw - 20px);
}

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

Using min(), max(), and clamp() with HSL functions

According to the official documentation, the hsl() functional notation expresses RGB color according to its hue, saturation, and lightness components.

HSL is a way to specify colors in web design. It lets you choose the hue (what color it is), saturation (how strong the color is), and lightness (how bright or dark the color is). With the CSS min(), max(), and clamp() functions, you can change the saturation and lightness values of your HSL colors more flexibly and dynamically. This gives you more control over how your website looks.

Look at the below code, and we’re setting the background color of an element using the HSL color model, wherein the hue value is set to 50 degrees, the saturation value is set as the maximum between 50%, and the value assigned to the custom property “–saturation,” and the lightness is set to 50%.

CodePen:

div {
  width: 200px;
  height: 100px;
  margin: 1rem;
}

:root {
    --saturation: 65%;
}

.box {
  background-color: hsl(50, max(50%, var(--saturation)), 50%);
}

Similarly, you can use the min() function. The below code shows that the lightness will never go below 30%. Here the lightness would be a minimum of 30% or the value of a custom property called –lightness.

Struggling to create a responsive design? Use our Px to REM Converter to quickly convert your CSS pixel values to REM values for a smooth and easy design process.

CodePen:

div {
  width: 200px;
  height: 100px;
  margin: 1rem;
}

:root {
    --lightness: 65%;
}

.box {
  background-color: hsl(50, 50%, min(30%, var(--lightness)));
}

Now, let’s say you want to set the saturation value of an HSL color to a value between 40% and 60%, regardless of the value of the –saturation custom property. You can use the clamp() function to achieve this:

CodePen:

div {
  width: 200px;
  height: 100px;
  margin: 1rem;
}

:root {
    --saturation: 65%;
}

.box {
  background-color: hsl(60, clamp(40%, var(--saturation), 60%), 50%);

}

Best Practices for using CSS min(), max(), and clamp() functions

While creating a responsive website that can adjust to different screen sizes, the use of CSS min(), max(), and clamp() functions would be a smart choice because these help you to create a flexible layout. However, to use these functions effectively, there are some best practices you should keep in mind to avoid minor problems with the layout.

Using CSS min(), max(), and clamp() functions with relative units

Using fixed units alone, like pixels, doesn’t work well for different sizes, which can make your site unresponsive. For example, if you want the container to be 600px on desktop screens and 300px on phone screens, you can use relative units like %, the CSS min() function, and media queries.

A relative unit such as em, rem, or percentage can make your design more responsive and flexible. When you use a relative unit with margin or padding, the elements will adjust to different screen sizes according to space availability. Website users can change the font size without compromising the website’s layout.

When the screen size is greater than 767px (a common breakpoint for mobile devices), the container’s width will be at least 100% of the parent width and 600px. In the image below, the box width is 600px because it is a larger screen.

On smaller screens, the container width will be either 100% of the parent’s width or 300px, whichever is smaller. This is specified inside a media query that targets small screens, such as phones, allowing the container to adjust to the available screen space. In the image below, the box size is 300px because the screen is smaller.

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

.rectangle {
  width: min(100%, 600px);
}

@media (max-width: 767px) {
  .rectangle {
    width: min(100%, 300px);
  }
}
  .box {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

Binary to Decimal Converter is a tool that converts binary numbers into their equivalent decimal form. Simply enter a binary number and let this converter do it for you.

Avoid using CSS min(), max(), and clamp() functions for fixed values

We can use CSS min(), max(), and clamp() functions with fixed values, but it’s not recommended. These functions are meant to make the layout responsive and adaptable.

When used with fixed values, they may produce a different outcome and can add unnecessary complexity. To understand this better, let’s look at the following code examples.

The images below show that the box width is the same in all the devices. So there is no need to use these functions here. Width, height, and font size could also be replaced by width: 300px, height: 200px, and font-size: 20px.

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Box Width: <span class="box-width"></span></p>
    <p>Box Height: <span class="box-height"></span></p>
    <p>Font Size: <span class="box-font"></span></p>
  </div>

const updateValues = () => {
  let pageWidth = window.innerWidth;
  let rectWidth = document.querySelector('.rectangle').clientWidth;
  let rectHeight = document.querySelector('.rectangle').clientHeight;
  let rectFont = document.querySelector('.rectangle');
  let styles = getComputedStyle(rectFont);
  let fontSize = styles.getPropertyValue('font-size');

  document.querySelector('.viewport').innerText = pageWidth + 'px';
  document.querySelector('.box-width').innerText = rectWidth + 'px';
  document.querySelector('.box-height').innerText = rectHeight + 'px';
  document.querySelector('.box-font').innerText = fontSize;
}

updateValues();
window.onresize = updateValues;

body {
  font-family: "Gill Sans Extrabold", sans-serif;
  font-size: 20px;
  background-color: rgb(184, 206, 226);
  display: grid;
  place-content: center;
  text-align: center;
}

.rectangle {
  background-color: rgb(171, 208, 222);
  height: 180px;
  display: grid;
  place-content: center;
  justify-self: center;
  border: 2px solid rgb(85, 85, 233);
}

.rectangle {
  width: min(300px, 400px);
  height: max(100px, 200px);
  font-size: clamp(10px, 20px, 100px);
}

.box-width,
.box-height,
.box-font {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.viewport {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.highlight {
  background-color: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
}

.parent {
  font-size: 20px;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.line {
  height: 1px;
  width: 100%;
  background-color: blue;
}

.parent p {
  background: white;
  border: 2px solid blue;
  padding: 1rem;
}

CodePen:

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Box Width: <span class="box-width"></span></p>
    <p>Box Height: <span class="box-height"></span></p>
    <p>Font Size: <span class="box-font"></span></p>
  </div>

In the above CSS code, the width is always 300px, and the height is always 200px. Therefore, there is no need to use the CSS min() or max() functions to specify these values. Instead, you can simply use width: 300px and height: 200px.

The clamp() function is used to set values within a range. However, since the font-size is fixed at 20px in this case, using the clamp() function is unnecessary. Therefore, you can specify the font-size directly as 20px.

Binary to Gray Code Converter is a free, easy-to-use online tool that converts a binary number into its equivalent Gray code representation in just one click.

Avoid overusing CSS min(), max(), and clamp() functions

Using CSS min(), max(), and clamp() functions can be helpful, but it’s essential to use them wisely to avoid making your code unnecessarily complex and difficult to maintain. Overuse of these functions can make your code harder to read and understand.

Suppose you have a section in your website with two images placed side-by-side, and you want to adjust their size based on the screen size. To do this, you can use the following CSS:

The CSS code sets the width and height of each image to a value of either 50% of the container width or 200px, whichever is smaller. Note that the fixed value of 200px may only work well on a small or very large screen.

In the output below, you can see that both images adjust as the screen size changes. You can make them even more interactive by using media queries to ensure that the images are sized correctly for each screen and that the styling is consistent across all screens.

<section> <img src="https://www.lambdatest.com/logo.png" alt="Image 1"> <img src="https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_c8f5f4721cde3897dffa246c0e0bfce9/lambdatest-lambdatest.png" alt="Image 2"></section>

section {
  display: flex;
}

img {
  width: min(50%, 200px);
  height: min(50%, 200px);
}

CodePen:

<section>
  <img src="https://www.lambdatest.com/logo.png" alt="Image 1">
  <img src="https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_c8f5f4721cde3897dffa246c0e0bfce9/lambdatest-lambdatest.png" alt="Image 2">
</section>

To adjust the width and height of the images based on the screen size, it’s better to use media queries. Here’s an example:

The code uses media queries to adjust the width and height of each image based on the screen size. It sets the default values for each property outside of any media query and overrides those values using media queries based on the screen size.

In the output below, both images adjust as the device changes. We used media queries instead of relying on the CSS min(), max(), and clamp() functions and the result is more interactive.

On the tablet device, both images adjust themselves based on the available space, which was different when we were using the CSS min(), max(), and clamp() functions.

<section>
  <img src="https://www.lambdatest.com/logo.png" alt="Image 1">
  <img src="https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_c8f5f4721cde3897dffa246c0e0bfce9/lambdatest-lambdatest.png" alt="Image 2">
</section>

section {
  display: flex;
}

img {
  width: 50%;
  height: auto;
}

@media screen and (min-width: 768px) {
  img {
    max-width: 50%;
    max-height: 200px;
  }
}

@media screen and (min-width: 1024px) {
  img {
    max-width: 200px;
    max-height: 50%;
  }
}

CodePen:

<section>
  <img src="https://www.lambdatest.com/logo.png" alt="Image 1">
  <img src="https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_c8f5f4721cde3897dffa246c0e0bfce9/lambdatest-lambdatest.png" alt="Image 2">
</section>

Try not to overuse the CSS min(), max(), and clamp() functions in your projects. Although they can be helpful in some situations, using them excessively or unnecessarily can result in complex and hard-to-maintain styles.

Binary to Octal Converter is a free, easy-to-use online tool that converts binary number to octal format. Enter a binary number and convert it to an octal number.

Use Fallback Values

While using the CSS min(), max(), and clamp() functions, it’s essential to use fallback values for browsers that do not support these functions. To ensure that your layout remains flexible, providing fallback values is crucial. According to this report, browsers like Internet Explorer (IE) do not support these functions, but IE still has a 2.51% share of the global desktop browser market.

To ensure that your layout remains flexible, it’s essential to provide fallback values. Let’s have a look at the browser compatibility of the CSS min(), max(), and clamp() functions.

Min()

Max()

Clamp()

Suppose you have the following CSS code.

If the browser doesn’t support the clamp function, the font size won’t be set. To ensure it’s kept in all browsers, we can use the fallback values as shown below:

If the browser doesn’t support the clamp() function, the font size will be set to a fixed value of 20px. It’s essential to provide fallback values so that when these CSS functions aren’t supported, they can use other fixed values.

Pros of CSS min(), max(), and clamp() functions

CSS min(), max(), and clamp() functions are powerful functions for creating dynamic and responsive layouts. To determine whether or not to use these functions in your projects, it is crucial to consider their pros.

Flexible values

In the example code, the function sets the width to either 10% of the viewport width or 100px, depending on which value is smaller. This allows the width to adjust dynamically based on the available space on the web page, ensuring a responsive layout.

In the image below, the box width is automatically set to 100px. As the device changes, the box width will adjust accordingly. In this case, the viewport width is 1366px, and 10vw would represent 10% of that, approximately 136px. Since the minimum of 136px and 100px is 100px, the box width is set to 100px.

In the image below, the box width is automatically set to 41px. As the device changes, the box width will adjust accordingly. In this case, the viewport width is 412px, and 10vw would represent 10% of that, approximately 41px. Since the minimum of 41px and 100px is 41px, the box width is set to 41px.

These two images show that using flexible values with the CSS min(), max(), and clamp() functions can make our website more responsive and dynamic.

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <p>
    <code class="value"
      >width: min(<span class="max">10vw</span>,
      <span class="min">100px</span>);</code
    >
  </p>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';

    checkWidth(rectWidth);
}

const checkWidth = (rectWidth) => {
    const minVal = parseInt(document.querySelector('.min').innerText, 10);

    if (rectWidth < minVal) {
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.max').classList.add('highlight');
    } else {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.min').classList.add('highlight');
    }
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .value {
    border-radius: 0px;
    padding: 0.5em 0.25em;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    width: min(10vw, 100px);
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

  .box {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .value {
    border-radius: 0px;
    padding: 0.5em 0.25em;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    width: min(10vw, 100px);
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

  .box {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

Simplified Code

We can use CSS min(), max(), and clamp() functions to simplify code and make it easier to read and maintain.

Media queries are commonly used to adjust styles based on the device screen size, viewport dimensions, and orientation. It helps developers customize the styles for different devices and CSS viewport units.

For example, we can use the clamp() function to define a range of font sizes for different screen sizes and limit it by maximum and minimum values. This means we don’t need to use media queries to adjust font size on other devices.

It can be easily replaced by the clamp() function.

In the below images, you can see that the font size varies as we change the devices.

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Font Size: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
   let rectFont = document.querySelector('.rectangle');
  let styles = getComputedStyle(rectFont);
  let fontSize = styles.getPropertyValue('font-size');

    document.querySelector('.viewport').innerText = pageWidth + 'px';
  document.querySelector('.box').innerText = fontSize;
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

.rectangle {
  width: min(100%, 600px);
}

.rectangle {
  font-size: 3rem;
}
@media (max-width: 1300px) {
  .rectangle {
    font-size: calc(-2rem + 5vw);
  }
}
@media (max-width: 900px) {
  .rectangle {
    font-size: 2rem;
  }
} 
  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

.rectangle {
  width: min(100%, 600px);
}

.rectangle {
  font-size: 3rem;
}
@media (max-width: 1300px) {
  .rectangle {
    font-size: calc(-2rem + 5vw);
  }
}
@media (max-width: 900px) {
  .rectangle {
    font-size: 2rem;
  }
} 
  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

Convert octal to decimal quickly and easily with our free online converter tool. Try it now for free.

Accessibility

These functions can help improve accessibility by allowing users to adjust font sizes and styles to meet their needs. People with special abilities might need larger text sizes or more contrast between text and background. Using these functions can make it easier to create responsive designs that accommodate these needs without compromising the overall look and feel.

To test for accessibility of your webpages or mobile apps so that people with special abilities can access your website or application, LambdaTest enables you to perform accessibility testing across 3000+ desktop browsers, browser versions, and operating systems.

%[ https://youtu.be/rkdi2L7XtE4 ]

You can also subscribe to our LambdaTest YouTube Channel to learn about software testing automation tools like Selenium, Playwright, Appium, and many more tutorials.

The clamp() function can set a range of font sizes that automatically adjust according to the screen’s width. This ensures that users can read the text without it being too small or too large, even if they zoom in or out on the page.

The clamp() function used here sets a minimum font size of 18px, a preferred font size of 3.5% of the viewport width, and a maximum font size of 28px. This ensures that the font size scales smoothly between these values based on the screen size.

Additionally, most modern browsers like Chrome, Firefox, Safari, and Edge support the CSS min(), max(), and clamp() functions. However, older browsers like Internet Explorer (IE) don’t support them, and we can ensure through browser testing on IE if it still makes sense. To ensure that your website is accessible to all users, you should provide fallback values for browsers that don’t support these functions.

We talked about fallback values in the best practices section for using the CSS min(), max(), and *clamp()*functions.

Shortcomings of CSS min(), max(), and clamp() functions

Though there are numerous advantages of using CSS min(), max(), and clamp() functions, there are a few shortcomings as well. Some of the major ones are mentioned below:

Complexity

Using CSS min(), max(), and clamp() functions can make the code complex and harder to understand, mainly if used excessively or improperly. While these functions offer flexible layout options, they may be challenging for new developers to read and understand.

Nesting multiple functions within each other is a common issue when using CSS min(), max(), and clamp() functions. This can lead to increased complexity, making it harder to maintain and debug in the long run. For example

This code calculates an element’s width using a combination of CSS min(), max(), and clamp() functions, which can be challenging to understand at first glance.

Debugging

CSS min(), max(), and clamp() functions can be hard to debug compared to other CSS properties, especially when using complex calculations or multiple variables. This can take more time and be more challenging to fix. Errors can happen due to syntax, calculation, compatibility, or complexity issues, making debugging difficult.

Suppose a developer is working on responsive modern web designs and wants to adjust the CSS font spacing and size of the heading based on the viewport width using the clamp() function. See the below examples.

If the developer unintentionally uses the min() function instead of clamp().

In such a scenario, the font size will always be set to the smallest value, irrespective of the viewport width. Detecting this mistake can be challenging since the code will compile without errors.

Let’s look at the examples of both of the above scenarios.

The image below shows that the text size changes as the browser window size changes. This is because we use the clamp() function, which changes the font size for the viewport width.

In the image below, you can see that the text size is almost the same as the device changes. This is because we are using the min() function. In this case, the font size will always be set to the smallest input value, regardless of the viewport width.

Fixing this error can be more complicated than correcting other CSS issues, especially if the code involves multiple calculations or variables.

Intuited to learn how to perform responsive testing, watch our video on performing responsive testing on the LambdaTest platform.

Browser Support

Some older browsers, such as Internet Explorer (IE), don’t support them. Therefore, it is essential to provide fallback values for browsers that don’t support these functions to ensure your website works for everyone. According to this report, IE still has a 2.51% share of the global desktop browser market.

Testing your website in Internet Explorer (IE) is essential to ensure compatibility with older browsers that some users may still be using. Even though fewer people use IE these days. By testing your website in IE, you can ensure that it works properly for all users, regardless of their browser. See the below graph by StatCounter; it keeps decreasing, which shows that it is not popular but still in use by 2.15 percent of global internet users.

Here are some tips for testing your website in IE:

Check Browser Support: Check which versions of IE your website supports before testing. If older versions are no longer widely used, skip testing on them to save time and effort.
Use Virtual Machines: You can use virtual machines to test your website on multiple versions of IE without installing each version on your local machine.
Test on Real Devices: Virtual machines help test your website in different IE versions, but testing on real devices is important to ensure your website works correctly.
Consider Alternatives: If users with modern browsers mainly access your website, you may drop support for older versions of IE.

You can also check out helpful CSS functions like calc(), as well as CSS values in which you will learn absolute, relative units, etc.

Decimal to Binary Converter is a free online tool that will give you the binary equivalent of any decimal number. Enter your number, then simply click ‘convert’.

Conclusion

In this article, we took a look at CSS min(), max(), and clamp() functions. We have understood these functions deeply with examples of each. We have also learned the best practices for using CSS min(), max(), and clamp() functions in your layout so that you can make a more responsive and flexible website. Ultimately, we have seen the pros and cons of using these functions, followed by browser compatibility testing.

So, in short, the CSS min(), max(), and clamp() functions can help keep your web designs responsive and flexible. Say you want the font size to be flexible so that it changes as the screen size changes. For this, you can use CSS min(), max(), and clamp() functions by passing a range of font sizes that will change based on the screen size like if the screen is small, the font size will be set to small and vice-versa.

Demystifying CSS Min(), Max(), and Clamp() Functions

SatyamTripathi — Mon, 09 Oct 2023 09:20:58 +0000

Without ado, let’s get started.

Want to convert your HTML code into BBCode? Look no further, Use our free online HTML to BBCode converter tool to convert your website’s HTML content to BBCode format

Introduction to CSS min(), max(), and clamp() functions

The image below is taken from LT Browser 2.0.

Need to convert HTML to XML? Our HTML to XML converter is fast, easy to use, and completely free. Convert your HTML files to XML in just a few seconds

Min() returns a minimum value from the list of values passed to the function, which is used for setting the width, font size, etc., to the minimum value.
Max() returns the maximum value from a list of values passed in so that width, font size, etc., can be set to the maximum value.
Clamp() takes three comma-separated values: a minimum value, a preferred value, and a maximum value. It returns the preferred value if it’s within the range. Otherwise, it returns the minimum or maximum value accordingly.

Let’s dive deep into each of them in more detail.

What does the min() function do in CSS?

The CSS min() function returns a minimum value from a list of comma-separated values. It sets the minimum width, padding, font size, etc.

Syntax:

As the viewport width changes, the 50vw value will also change, ensuring that the elements will never be smaller than either 400px or 50vw of the available viewport width, whichever is smaller.

CSS Viewports width is the width of the visible area on your screen when you open a webpage. It can differ based on the size of the devices (laptops, tablets, phones).

In the device below, you can see that the viewport width is 1366px. Therefore, 50% of 1366px would be 683px, and the minimum of 683px & 400px would be 400px, so that the box width would be 400px.

In the device below, the viewport width is 1024px, and 50% of the viewport width would be 512px. The minimum of 400px and 512px would be 400px so the box width will be set to 400px.

Make the conversion from YAML to JSON quick and easy with our free online converter YAML to JSON converter tool. No signup or installation required. Try it now

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <p>
    <code class="value"
      >width: min(<span class="max">50%</span>,
      <span class="min">400px</span>);</code
    >
  </p>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';

    checkWidth(rectWidth);
}

const checkWidth = (rectWidth) => {
    const minVal = parseInt(document.querySelector('.min').innerText, 10);

    if (rectWidth < minVal) {
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.max').classList.add('highlight');
    } else {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.min').classList.add('highlight');
    }
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .value {
    border-radius: 0px;
    padding: 0.5em 0.25em;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    width: min(50vw, 400px);
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

  .box {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <p>
    <code class="value"
      >width: min(<span class="max">50%</span>,
      <span class="min">400px</span>);</code
    >
  </p>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

The above code is trying to change the width of a rectangular box, but you can also change its height, font size, margin, padding, and more.

What does the max() function do in CSS?

The CSS max() function is a function that returns a maximum value from a list of comma-separated values. It is used to set the maximum width, padding, font size, etc.

Syntax:

As the viewport width changes, the 45vw value will also change, ensuring that the elements will never be larger than either 400px or 45vw of the available viewport width, whichever is larger.

In the device below, you can see that the box width is 615px. When the viewport’s width is 1366px, 45% of 1366px would be around 615px. Therefore, the box width would be a maximum of 400px & 615px.

Now: in the below device, the viewport width is 1024px; if you calculate 45% of 1024px, it would be around 461px. The box width would be a maximum of 400px & 461px, i.e., 461px.

Looking for an easy way to convert your HTML files to JSON? Try our free online HTML to JSON converter tool to convert your HTML files to JSON format in seconds

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <p>
    <code class="value"
      >width: max(<span class="max">45%</span>,
      <span class="min">400px</span>);</code
    >
  </p>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';

    checkWidth(rectWidth);
}

const checkWidth = (rectWidth) => {
    const minVal = parseInt(document.querySelector('.min').innerText, 10);

    if (rectWidth > minVal) {
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.max').classList.add('highlight');
    } else {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.min').classList.add('highlight');
    }
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .value {
    border-radius: 0px;
    padding: 0.5em 0.25em;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    width: max(45vw, 400px);
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

  .box {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <p>
    <code class="value"
      >width: max(<span class="max">45%</span>,
      <span class="min">400px</span>);</code
    >
  </p>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

What does the clamp() function do in CSS?

Syntax:

where

MIN: represents the minimum value
VAL: represents the preferred value
MAX: represents the maximum value.

Let’s consider an example for better understanding:

In the device below, you can see that the viewport width is 1366px. The 50% of the viewport width would be 683px. Since we have set the maximum value to 400px, the box width would be 400px.

Need to convert HTML data to CSV format? Use our HTML to CSV converter tool to convert your HTML data into CSV format quickly and easily. Try it out today.

Similarly, in the device below, the viewport width is 414px. The 50% of the 414px would be 207px. But we have set the minimum value to 250px, so the box width would be 250px.

You might have considered how the clamp() function calculates its values. For example, clamp(250px, 50%, 400px) can be written as max(250px, min(50%, 400px).

<div class="parent">
  <div class="line"></div>
  <p>Viewport Width: <span class="viewport"></span></p>
  <div class="line"></div>
</div>

<p>
  <code class="value"
    >width: clamp(<span class="max">250px</span>, <span class="pref">50%</span>,
    <span class="min">400px</span>);</code
  >
</p>

<div class="rectangle">
  <p>Box Width: <span class="box"></span></p>
</div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';

    checkWidth(rectWidth);
}

const checkWidth = (rectWidth) => {
    const maxVal = parseInt(document.querySelector('.max').innerText, 10);
    const minVal = parseInt(document.querySelector('.min').innerText, 10);

    if (rectWidth === maxVal) {
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.pref').classList.remove('highlight');
        document.querySelector('.max').classList.add('highlight');
    } else if (rectWidth === minVal) {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.pref').classList.remove('highlight');
        document.querySelector('.min').classList.add('highlight');
    } else {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.pref').classList.add('highlight');
    }
}

updateValues();
window.onresize = updateValues;

body {
  font-family: "Gill Sans Extrabold", sans-serif;
  font-size: 20px;
  background-color: rgb(184, 206, 226);
  display: grid;
  place-content: center;
  text-align: center;
}

.value {
  border-radius: 0px;
  padding: 0.5em 0.25em;
}

.rectangle {
  background-color: rgb(171, 208, 222);
  height: 180px;
  width: clamp(250px, 50%, 400px);
  display: grid;
  place-content: center;
  justify-self: center;
  border: 2px solid rgb(85, 85, 233);
}

.box {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.viewport {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.highlight {
  background-color: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
}

.parent {
  font-size: 20px;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.line {
  height: 1px;
  width: 100%;
  background-color: blue;
}

.parent p {
  background: white;
  border: 2px solid blue;
  padding: 1rem;
}

body {
  font-family: "Gill Sans Extrabold", sans-serif;
  font-size: 20px;
  background-color: rgb(184, 206, 226);
  display: grid;
  place-content: center;
  text-align: center;
}

.value {
  border-radius: 0px;
  padding: 0.5em 0.25em;
}

.rectangle {
  background-color: rgb(171, 208, 222);
  height: 180px;
  width: clamp(250px, 50%, 400px);
  display: grid;
  place-content: center;
  justify-self: center;
  border: 2px solid rgb(85, 85, 233);
}

.box {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.viewport {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.highlight {
  background-color: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
}

.parent {
  font-size: 20px;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.line {
  height: 1px;
  width: 100%;
  background-color: blue;
}

.parent p {
  background: white;
  border: 2px solid blue;
  padding: 1rem;
}

So, to simplify the above code, we can break it down into simple code.

In the above code, we have separated the minimum and maximum width from the calc() function, making the code easier to understand and debug.

Simplify the process of converting JSON to HTML with our efficient online JSON to HTML converter to convert your JSON data to HTML code quickly and easily.

In the below device, the box width is 800px, though the box-width should be greater than 800px according to the above code. We have also set that the width cannot exceed 800px (max-width: 800px).

In the below device, the width is between the minimum width (400px) and maximum width (800px), i.e., 492px. Here the width would be according to calc(50vw — 20px).

Similarly, in the below device, the box width is 300px, i.e., the minimum width.

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
   let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
  document.querySelector('.box').innerText = rectWidth + 'px';;
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

.rectangle {
  min-width: 300px;
  max-width: 800px;
  width: calc(50vw - 20px);
}

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

.rectangle {
  min-width: 300px;
  max-width: 800px;
  width: calc(50vw - 20px);
}

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

Using min(), max(), and clamp() with HSL functions

According to the official documentation, the hsl() functional notation expresses RGB color according to its hue, saturation, and lightness components.

CodePen:

div {
  width: 200px;
  height: 100px;
  margin: 1rem;
}

:root {
    --saturation: 65%;
}

.box {
  background-color: hsl(50, max(50%, var(--saturation)), 50%);
}

Struggling to create a responsive design? Use our Px to REM Converter to quickly convert your CSS pixel values to REM values for a smooth and easy design process.

CodePen:

div {
  width: 200px;
  height: 100px;
  margin: 1rem;
}

:root {
    --lightness: 65%;
}

.box {
  background-color: hsl(50, 50%, min(30%, var(--lightness)));
}

CodePen:

div {
  width: 200px;
  height: 100px;
  margin: 1rem;
}

:root {
    --saturation: 65%;
}

.box {
  background-color: hsl(60, clamp(40%, var(--saturation), 60%), 50%);

}

Best Practices for using CSS min(), max(), and clamp() functions

Using CSS min(), max(), and clamp() functions with relative units

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

.rectangle {
  width: min(100%, 600px);
}

@media (max-width: 767px) {
  .rectangle {
    width: min(100%, 300px);
  }
}
  .box {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

Binary to Decimal Converter is a tool that converts binary numbers into their equivalent decimal form. Simply enter a binary number and let this converter do it for you.

Avoid using CSS min(), max(), and clamp() functions for fixed values

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Box Width: <span class="box-width"></span></p>
    <p>Box Height: <span class="box-height"></span></p>
    <p>Font Size: <span class="box-font"></span></p>
  </div>

const updateValues = () => {
  let pageWidth = window.innerWidth;
  let rectWidth = document.querySelector('.rectangle').clientWidth;
  let rectHeight = document.querySelector('.rectangle').clientHeight;
  let rectFont = document.querySelector('.rectangle');
  let styles = getComputedStyle(rectFont);
  let fontSize = styles.getPropertyValue('font-size');

  document.querySelector('.viewport').innerText = pageWidth + 'px';
  document.querySelector('.box-width').innerText = rectWidth + 'px';
  document.querySelector('.box-height').innerText = rectHeight + 'px';
  document.querySelector('.box-font').innerText = fontSize;
}

updateValues();
window.onresize = updateValues;

body {
  font-family: "Gill Sans Extrabold", sans-serif;
  font-size: 20px;
  background-color: rgb(184, 206, 226);
  display: grid;
  place-content: center;
  text-align: center;
}

.rectangle {
  background-color: rgb(171, 208, 222);
  height: 180px;
  display: grid;
  place-content: center;
  justify-self: center;
  border: 2px solid rgb(85, 85, 233);
}

.rectangle {
  width: min(300px, 400px);
  height: max(100px, 200px);
  font-size: clamp(10px, 20px, 100px);
}

.box-width,
.box-height,
.box-font {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.viewport {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.highlight {
  background-color: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
}

.parent {
  font-size: 20px;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.line {
  height: 1px;
  width: 100%;
  background-color: blue;
}

.parent p {
  background: white;
  border: 2px solid blue;
  padding: 1rem;
}

CodePen:

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Box Width: <span class="box-width"></span></p>
    <p>Box Height: <span class="box-height"></span></p>
    <p>Font Size: <span class="box-font"></span></p>
  </div>

Binary to Gray Code Converter is a free, easy-to-use online tool that converts a binary number into its equivalent Gray code representation in just one click.

Avoid overusing CSS min(), max(), and clamp() functions

Suppose you have a section in your website with two images placed side-by-side, and you want to adjust their size based on the screen size. To do this, you can use the following CSS:

<section> <img src="https://www.lambdatest.com/logo.png" alt="Image 1"> <img src="https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_c8f5f4721cde3897dffa246c0e0bfce9/lambdatest-lambdatest.png" alt="Image 2"></section>

section {
  display: flex;
}

img {
  width: min(50%, 200px);
  height: min(50%, 200px);
}

CodePen:

<section>
  <img src="https://www.lambdatest.com/logo.png" alt="Image 1">
  <img src="https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_c8f5f4721cde3897dffa246c0e0bfce9/lambdatest-lambdatest.png" alt="Image 2">
</section>

To adjust the width and height of the images based on the screen size, it’s better to use media queries. Here’s an example:

In the output below, both images adjust as the device changes. We used media queries instead of relying on the CSS min(), max(), and clamp() functions and the result is more interactive.

On the tablet device, both images adjust themselves based on the available space, which was different when we were using the CSS min(), max(), and clamp() functions.

<section>
  <img src="https://www.lambdatest.com/logo.png" alt="Image 1">
  <img src="https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_c8f5f4721cde3897dffa246c0e0bfce9/lambdatest-lambdatest.png" alt="Image 2">
</section>

section {
  display: flex;
}

img {
  width: 50%;
  height: auto;
}

@media screen and (min-width: 768px) {
  img {
    max-width: 50%;
    max-height: 200px;
  }
}

@media screen and (min-width: 1024px) {
  img {
    max-width: 200px;
    max-height: 50%;
  }
}

CodePen:

<section>
  <img src="https://www.lambdatest.com/logo.png" alt="Image 1">
  <img src="https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_c8f5f4721cde3897dffa246c0e0bfce9/lambdatest-lambdatest.png" alt="Image 2">
</section>

Binary to Octal Converter is a free, easy-to-use online tool that converts binary number to octal format. Enter a binary number and convert it to an octal number.

Use Fallback Values

To ensure that your layout remains flexible, it’s essential to provide fallback values. Let’s have a look at the browser compatibility of the CSS min(), max(), and clamp() functions.

Min()

Max()

Clamp()

Suppose you have the following CSS code.

If the browser doesn’t support the clamp function, the font size won’t be set. To ensure it’s kept in all browsers, we can use the fallback values as shown below:

Pros of CSS min(), max(), and clamp() functions

Flexible values

These two images show that using flexible values with the CSS min(), max(), and clamp() functions can make our website more responsive and dynamic.

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <p>
    <code class="value"
      >width: min(<span class="max">10vw</span>,
      <span class="min">100px</span>);</code
    >
  </p>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';

    checkWidth(rectWidth);
}

const checkWidth = (rectWidth) => {
    const minVal = parseInt(document.querySelector('.min').innerText, 10);

    if (rectWidth < minVal) {
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.max').classList.add('highlight');
    } else {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.min').classList.add('highlight');
    }
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .value {
    border-radius: 0px;
    padding: 0.5em 0.25em;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    width: min(10vw, 100px);
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

  .box {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .value {
    border-radius: 0px;
    padding: 0.5em 0.25em;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    width: min(10vw, 100px);
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

  .box {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

Simplified Code

We can use CSS min(), max(), and clamp() functions to simplify code and make it easier to read and maintain.

It can be easily replaced by the clamp() function.

In the below images, you can see that the font size varies as we change the devices.

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Font Size: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
   let rectFont = document.querySelector('.rectangle');
  let styles = getComputedStyle(rectFont);
  let fontSize = styles.getPropertyValue('font-size');

    document.querySelector('.viewport').innerText = pageWidth + 'px';
  document.querySelector('.box').innerText = fontSize;
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

.rectangle {
  width: min(100%, 600px);
}

.rectangle {
  font-size: 3rem;
}
@media (max-width: 1300px) {
  .rectangle {
    font-size: calc(-2rem + 5vw);
  }
}
@media (max-width: 900px) {
  .rectangle {
    font-size: 2rem;
  }
} 
  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

.rectangle {
  width: min(100%, 600px);
}

.rectangle {
  font-size: 3rem;
}
@media (max-width: 1300px) {
  .rectangle {
    font-size: calc(-2rem + 5vw);
  }
}
@media (max-width: 900px) {
  .rectangle {
    font-size: 2rem;
  }
} 
  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

Convert octal to decimal quickly and easily with our free online converter tool. Try it now for free.

Accessibility

%[ https://youtu.be/rkdi2L7XtE4 ]

You can also subscribe to our LambdaTest YouTube Channel to learn about software testing automation tools like Selenium, Playwright, Appium, and many more tutorials.

We talked about fallback values in the best practices section for using the CSS min(), max(), and *clamp()*functions.

Shortcomings of CSS min(), max(), and clamp() functions

Though there are numerous advantages of using CSS min(), max(), and clamp() functions, there are a few shortcomings as well. Some of the major ones are mentioned below:

Complexity

This code calculates an element’s width using a combination of CSS min(), max(), and clamp() functions, which can be challenging to understand at first glance.

Debugging

If the developer unintentionally uses the min() function instead of clamp().

In such a scenario, the font size will always be set to the smallest value, irrespective of the viewport width. Detecting this mistake can be challenging since the code will compile without errors.

Let’s look at the examples of both of the above scenarios.

The image below shows that the text size changes as the browser window size changes. This is because we use the clamp() function, which changes the font size for the viewport width.

Fixing this error can be more complicated than correcting other CSS issues, especially if the code involves multiple calculations or variables.

Intuited to learn how to perform responsive testing, watch our video on performing responsive testing on the LambdaTest platform.

Browser Support

Here are some tips for testing your website in IE:

Check Browser Support: Check which versions of IE your website supports before testing. If older versions are no longer widely used, skip testing on them to save time and effort.
Use Virtual Machines: You can use virtual machines to test your website on multiple versions of IE without installing each version on your local machine.
Test on Real Devices: Virtual machines help test your website in different IE versions, but testing on real devices is important to ensure your website works correctly.
Consider Alternatives: If users with modern browsers mainly access your website, you may drop support for older versions of IE.

You can also check out helpful CSS functions like calc(), as well as CSS values in which you will learn absolute, relative units, etc.

Decimal to Binary Converter is a free online tool that will give you the binary equivalent of any decimal number. Enter your number, then simply click ‘convert’.

Conclusion

Demystifying CSS Min(), Max(), and Clamp() Functions

SatyamTripathi — Mon, 09 Oct 2023 09:20:58 +0000

Without ado, let’s get started.

Want to convert your HTML code into BBCode? Look no further, Use our free online HTML to BBCode converter tool to convert your website’s HTML content to BBCode format

Introduction to CSS min(), max(), and clamp() functions

The image below is taken from LT Browser 2.0.

Need to convert HTML to XML? Our HTML to XML converter is fast, easy to use, and completely free. Convert your HTML files to XML in just a few seconds

Min() returns a minimum value from the list of values passed to the function, which is used for setting the width, font size, etc., to the minimum value.
Max() returns the maximum value from a list of values passed in so that width, font size, etc., can be set to the maximum value.
Clamp() takes three comma-separated values: a minimum value, a preferred value, and a maximum value. It returns the preferred value if it’s within the range. Otherwise, it returns the minimum or maximum value accordingly.

Let’s dive deep into each of them in more detail.

What does the min() function do in CSS?

The CSS min() function returns a minimum value from a list of comma-separated values. It sets the minimum width, padding, font size, etc.

Syntax:

As the viewport width changes, the 50vw value will also change, ensuring that the elements will never be smaller than either 400px or 50vw of the available viewport width, whichever is smaller.

CSS Viewports width is the width of the visible area on your screen when you open a webpage. It can differ based on the size of the devices (laptops, tablets, phones).

In the device below, you can see that the viewport width is 1366px. Therefore, 50% of 1366px would be 683px, and the minimum of 683px & 400px would be 400px, so that the box width would be 400px.

In the device below, the viewport width is 1024px, and 50% of the viewport width would be 512px. The minimum of 400px and 512px would be 400px so the box width will be set to 400px.

Make the conversion from YAML to JSON quick and easy with our free online converter YAML to JSON converter tool. No signup or installation required. Try it now

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <p>
    <code class="value"
      >width: min(<span class="max">50%</span>,
      <span class="min">400px</span>);</code
    >
  </p>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';

    checkWidth(rectWidth);
}

const checkWidth = (rectWidth) => {
    const minVal = parseInt(document.querySelector('.min').innerText, 10);

    if (rectWidth < minVal) {
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.max').classList.add('highlight');
    } else {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.min').classList.add('highlight');
    }
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .value {
    border-radius: 0px;
    padding: 0.5em 0.25em;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    width: min(50vw, 400px);
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

  .box {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <p>
    <code class="value"
      >width: min(<span class="max">50%</span>,
      <span class="min">400px</span>);</code
    >
  </p>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

The above code is trying to change the width of a rectangular box, but you can also change its height, font size, margin, padding, and more.

What does the max() function do in CSS?

The CSS max() function is a function that returns a maximum value from a list of comma-separated values. It is used to set the maximum width, padding, font size, etc.

Syntax:

As the viewport width changes, the 45vw value will also change, ensuring that the elements will never be larger than either 400px or 45vw of the available viewport width, whichever is larger.

In the device below, you can see that the box width is 615px. When the viewport’s width is 1366px, 45% of 1366px would be around 615px. Therefore, the box width would be a maximum of 400px & 615px.

Now: in the below device, the viewport width is 1024px; if you calculate 45% of 1024px, it would be around 461px. The box width would be a maximum of 400px & 461px, i.e., 461px.

Looking for an easy way to convert your HTML files to JSON? Try our free online HTML to JSON converter tool to convert your HTML files to JSON format in seconds

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <p>
    <code class="value"
      >width: max(<span class="max">45%</span>,
      <span class="min">400px</span>);</code
    >
  </p>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';

    checkWidth(rectWidth);
}

const checkWidth = (rectWidth) => {
    const minVal = parseInt(document.querySelector('.min').innerText, 10);

    if (rectWidth > minVal) {
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.max').classList.add('highlight');
    } else {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.min').classList.add('highlight');
    }
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .value {
    border-radius: 0px;
    padding: 0.5em 0.25em;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    width: max(45vw, 400px);
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

  .box {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <p>
    <code class="value"
      >width: max(<span class="max">45%</span>,
      <span class="min">400px</span>);</code
    >
  </p>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

What does the clamp() function do in CSS?

Syntax:

where

MIN: represents the minimum value
VAL: represents the preferred value
MAX: represents the maximum value.

Let’s consider an example for better understanding:

In the device below, you can see that the viewport width is 1366px. The 50% of the viewport width would be 683px. Since we have set the maximum value to 400px, the box width would be 400px.

Need to convert HTML data to CSV format? Use our HTML to CSV converter tool to convert your HTML data into CSV format quickly and easily. Try it out today.

Similarly, in the device below, the viewport width is 414px. The 50% of the 414px would be 207px. But we have set the minimum value to 250px, so the box width would be 250px.

You might have considered how the clamp() function calculates its values. For example, clamp(250px, 50%, 400px) can be written as max(250px, min(50%, 400px).

<div class="parent">
  <div class="line"></div>
  <p>Viewport Width: <span class="viewport"></span></p>
  <div class="line"></div>
</div>

<p>
  <code class="value"
    >width: clamp(<span class="max">250px</span>, <span class="pref">50%</span>,
    <span class="min">400px</span>);</code
  >
</p>

<div class="rectangle">
  <p>Box Width: <span class="box"></span></p>
</div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';

    checkWidth(rectWidth);
}

const checkWidth = (rectWidth) => {
    const maxVal = parseInt(document.querySelector('.max').innerText, 10);
    const minVal = parseInt(document.querySelector('.min').innerText, 10);

    if (rectWidth === maxVal) {
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.pref').classList.remove('highlight');
        document.querySelector('.max').classList.add('highlight');
    } else if (rectWidth === minVal) {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.pref').classList.remove('highlight');
        document.querySelector('.min').classList.add('highlight');
    } else {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.pref').classList.add('highlight');
    }
}

updateValues();
window.onresize = updateValues;

body {
  font-family: "Gill Sans Extrabold", sans-serif;
  font-size: 20px;
  background-color: rgb(184, 206, 226);
  display: grid;
  place-content: center;
  text-align: center;
}

.value {
  border-radius: 0px;
  padding: 0.5em 0.25em;
}

.rectangle {
  background-color: rgb(171, 208, 222);
  height: 180px;
  width: clamp(250px, 50%, 400px);
  display: grid;
  place-content: center;
  justify-self: center;
  border: 2px solid rgb(85, 85, 233);
}

.box {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.viewport {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.highlight {
  background-color: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
}

.parent {
  font-size: 20px;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.line {
  height: 1px;
  width: 100%;
  background-color: blue;
}

.parent p {
  background: white;
  border: 2px solid blue;
  padding: 1rem;
}

body {
  font-family: "Gill Sans Extrabold", sans-serif;
  font-size: 20px;
  background-color: rgb(184, 206, 226);
  display: grid;
  place-content: center;
  text-align: center;
}

.value {
  border-radius: 0px;
  padding: 0.5em 0.25em;
}

.rectangle {
  background-color: rgb(171, 208, 222);
  height: 180px;
  width: clamp(250px, 50%, 400px);
  display: grid;
  place-content: center;
  justify-self: center;
  border: 2px solid rgb(85, 85, 233);
}

.box {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.viewport {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.highlight {
  background-color: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
}

.parent {
  font-size: 20px;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.line {
  height: 1px;
  width: 100%;
  background-color: blue;
}

.parent p {
  background: white;
  border: 2px solid blue;
  padding: 1rem;
}

So, to simplify the above code, we can break it down into simple code.

In the above code, we have separated the minimum and maximum width from the calc() function, making the code easier to understand and debug.

Simplify the process of converting JSON to HTML with our efficient online JSON to HTML converter to convert your JSON data to HTML code quickly and easily.

In the below device, the box width is 800px, though the box-width should be greater than 800px according to the above code. We have also set that the width cannot exceed 800px (max-width: 800px).

In the below device, the width is between the minimum width (400px) and maximum width (800px), i.e., 492px. Here the width would be according to calc(50vw — 20px).

Similarly, in the below device, the box width is 300px, i.e., the minimum width.

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
   let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
  document.querySelector('.box').innerText = rectWidth + 'px';;
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

.rectangle {
  min-width: 300px;
  max-width: 800px;
  width: calc(50vw - 20px);
}

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

.rectangle {
  min-width: 300px;
  max-width: 800px;
  width: calc(50vw - 20px);
}

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

Using min(), max(), and clamp() with HSL functions

According to the official documentation, the hsl() functional notation expresses RGB color according to its hue, saturation, and lightness components.

CodePen:

div {
  width: 200px;
  height: 100px;
  margin: 1rem;
}

:root {
    --saturation: 65%;
}

.box {
  background-color: hsl(50, max(50%, var(--saturation)), 50%);
}

Struggling to create a responsive design? Use our Px to REM Converter to quickly convert your CSS pixel values to REM values for a smooth and easy design process.

CodePen:

div {
  width: 200px;
  height: 100px;
  margin: 1rem;
}

:root {
    --lightness: 65%;
}

.box {
  background-color: hsl(50, 50%, min(30%, var(--lightness)));
}

CodePen:

div {
  width: 200px;
  height: 100px;
  margin: 1rem;
}

:root {
    --saturation: 65%;
}

.box {
  background-color: hsl(60, clamp(40%, var(--saturation), 60%), 50%);

}

Best Practices for using CSS min(), max(), and clamp() functions

Using CSS min(), max(), and clamp() functions with relative units

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

.rectangle {
  width: min(100%, 600px);
}

@media (max-width: 767px) {
  .rectangle {
    width: min(100%, 300px);
  }
}
  .box {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

Binary to Decimal Converter is a tool that converts binary numbers into their equivalent decimal form. Simply enter a binary number and let this converter do it for you.

Avoid using CSS min(), max(), and clamp() functions for fixed values

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Box Width: <span class="box-width"></span></p>
    <p>Box Height: <span class="box-height"></span></p>
    <p>Font Size: <span class="box-font"></span></p>
  </div>

const updateValues = () => {
  let pageWidth = window.innerWidth;
  let rectWidth = document.querySelector('.rectangle').clientWidth;
  let rectHeight = document.querySelector('.rectangle').clientHeight;
  let rectFont = document.querySelector('.rectangle');
  let styles = getComputedStyle(rectFont);
  let fontSize = styles.getPropertyValue('font-size');

  document.querySelector('.viewport').innerText = pageWidth + 'px';
  document.querySelector('.box-width').innerText = rectWidth + 'px';
  document.querySelector('.box-height').innerText = rectHeight + 'px';
  document.querySelector('.box-font').innerText = fontSize;
}

updateValues();
window.onresize = updateValues;

body {
  font-family: "Gill Sans Extrabold", sans-serif;
  font-size: 20px;
  background-color: rgb(184, 206, 226);
  display: grid;
  place-content: center;
  text-align: center;
}

.rectangle {
  background-color: rgb(171, 208, 222);
  height: 180px;
  display: grid;
  place-content: center;
  justify-self: center;
  border: 2px solid rgb(85, 85, 233);
}

.rectangle {
  width: min(300px, 400px);
  height: max(100px, 200px);
  font-size: clamp(10px, 20px, 100px);
}

.box-width,
.box-height,
.box-font {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.viewport {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.highlight {
  background-color: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
}

.parent {
  font-size: 20px;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.line {
  height: 1px;
  width: 100%;
  background-color: blue;
}

.parent p {
  background: white;
  border: 2px solid blue;
  padding: 1rem;
}

CodePen:

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Box Width: <span class="box-width"></span></p>
    <p>Box Height: <span class="box-height"></span></p>
    <p>Font Size: <span class="box-font"></span></p>
  </div>

Binary to Gray Code Converter is a free, easy-to-use online tool that converts a binary number into its equivalent Gray code representation in just one click.

Avoid overusing CSS min(), max(), and clamp() functions

Suppose you have a section in your website with two images placed side-by-side, and you want to adjust their size based on the screen size. To do this, you can use the following CSS:

<section> <img src="https://www.lambdatest.com/logo.png" alt="Image 1"> <img src="https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_c8f5f4721cde3897dffa246c0e0bfce9/lambdatest-lambdatest.png" alt="Image 2"></section>

section {
  display: flex;
}

img {
  width: min(50%, 200px);
  height: min(50%, 200px);
}

CodePen:

<section>
  <img src="https://www.lambdatest.com/logo.png" alt="Image 1">
  <img src="https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_c8f5f4721cde3897dffa246c0e0bfce9/lambdatest-lambdatest.png" alt="Image 2">
</section>

To adjust the width and height of the images based on the screen size, it’s better to use media queries. Here’s an example:

In the output below, both images adjust as the device changes. We used media queries instead of relying on the CSS min(), max(), and clamp() functions and the result is more interactive.

On the tablet device, both images adjust themselves based on the available space, which was different when we were using the CSS min(), max(), and clamp() functions.

<section>
  <img src="https://www.lambdatest.com/logo.png" alt="Image 1">
  <img src="https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_c8f5f4721cde3897dffa246c0e0bfce9/lambdatest-lambdatest.png" alt="Image 2">
</section>

section {
  display: flex;
}

img {
  width: 50%;
  height: auto;
}

@media screen and (min-width: 768px) {
  img {
    max-width: 50%;
    max-height: 200px;
  }
}

@media screen and (min-width: 1024px) {
  img {
    max-width: 200px;
    max-height: 50%;
  }
}

CodePen:

<section>
  <img src="https://www.lambdatest.com/logo.png" alt="Image 1">
  <img src="https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_c8f5f4721cde3897dffa246c0e0bfce9/lambdatest-lambdatest.png" alt="Image 2">
</section>

Binary to Octal Converter is a free, easy-to-use online tool that converts binary number to octal format. Enter a binary number and convert it to an octal number.

Use Fallback Values

To ensure that your layout remains flexible, it’s essential to provide fallback values. Let’s have a look at the browser compatibility of the CSS min(), max(), and clamp() functions.

Min()

Max()

Clamp()

Suppose you have the following CSS code.

If the browser doesn’t support the clamp function, the font size won’t be set. To ensure it’s kept in all browsers, we can use the fallback values as shown below:

Pros of CSS min(), max(), and clamp() functions

Flexible values

These two images show that using flexible values with the CSS min(), max(), and clamp() functions can make our website more responsive and dynamic.

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <p>
    <code class="value"
      >width: min(<span class="max">10vw</span>,
      <span class="min">100px</span>);</code
    >
  </p>

  <div class="rectangle">
    <p>Box Width: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';

    checkWidth(rectWidth);
}

const checkWidth = (rectWidth) => {
    const minVal = parseInt(document.querySelector('.min').innerText, 10);

    if (rectWidth < minVal) {
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.max').classList.add('highlight');
    } else {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.min').classList.add('highlight');
    }
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .value {
    border-radius: 0px;
    padding: 0.5em 0.25em;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    width: min(10vw, 100px);
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

  .box {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .value {
    border-radius: 0px;
    padding: 0.5em 0.25em;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    width: min(10vw, 100px);
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

  .box {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

Simplified Code

We can use CSS min(), max(), and clamp() functions to simplify code and make it easier to read and maintain.

It can be easily replaced by the clamp() function.

In the below images, you can see that the font size varies as we change the devices.

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>

  <div class="rectangle">
    <p>Font Size: <span class="box"></span></p>
  </div>

const updateValues = () => {
    let pageWidth = window.innerWidth;
   let rectFont = document.querySelector('.rectangle');
  let styles = getComputedStyle(rectFont);
  let fontSize = styles.getPropertyValue('font-size');

    document.querySelector('.viewport').innerText = pageWidth + 'px';
  document.querySelector('.box').innerText = fontSize;
}

updateValues();
window.onresize = updateValues;

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

.rectangle {
  width: min(100%, 600px);
}

.rectangle {
  font-size: 3rem;
}
@media (max-width: 1300px) {
  .rectangle {
    font-size: calc(-2rem + 5vw);
  }
}
@media (max-width: 900px) {
  .rectangle {
    font-size: 2rem;
  }
} 
  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }

  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }

.rectangle {
  width: min(100%, 600px);
}

.rectangle {
  font-size: 3rem;
}
@media (max-width: 1300px) {
  .rectangle {
    font-size: calc(-2rem + 5vw);
  }
}
@media (max-width: 900px) {
  .rectangle {
    font-size: 2rem;
  }
} 
  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }

  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }

  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }

  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }

Convert octal to decimal quickly and easily with our free online converter tool. Try it now for free.

Accessibility

%[ https://youtu.be/rkdi2L7XtE4 ]

You can also subscribe to our LambdaTest YouTube Channel to learn about software testing automation tools like Selenium, Playwright, Appium, and many more tutorials.

We talked about fallback values in the best practices section for using the CSS min(), max(), and *clamp()*functions.

Shortcomings of CSS min(), max(), and clamp() functions

Though there are numerous advantages of using CSS min(), max(), and clamp() functions, there are a few shortcomings as well. Some of the major ones are mentioned below:

Complexity

This code calculates an element’s width using a combination of CSS min(), max(), and clamp() functions, which can be challenging to understand at first glance.

Debugging

If the developer unintentionally uses the min() function instead of clamp().

In such a scenario, the font size will always be set to the smallest value, irrespective of the viewport width. Detecting this mistake can be challenging since the code will compile without errors.

Let’s look at the examples of both of the above scenarios.

The image below shows that the text size changes as the browser window size changes. This is because we use the clamp() function, which changes the font size for the viewport width.

Fixing this error can be more complicated than correcting other CSS issues, especially if the code involves multiple calculations or variables.

Intuited to learn how to perform responsive testing, watch our video on performing responsive testing on the LambdaTest platform.

Browser Support

Here are some tips for testing your website in IE:

Check Browser Support: Check which versions of IE your website supports before testing. If older versions are no longer widely used, skip testing on them to save time and effort.
Use Virtual Machines: You can use virtual machines to test your website on multiple versions of IE without installing each version on your local machine.
Test on Real Devices: Virtual machines help test your website in different IE versions, but testing on real devices is important to ensure your website works correctly.
Consider Alternatives: If users with modern browsers mainly access your website, you may drop support for older versions of IE.

You can also check out helpful CSS functions like calc(), as well as CSS values in which you will learn absolute, relative units, etc.

Decimal to Binary Converter is a free online tool that will give you the binary equivalent of any decimal number. Enter your number, then simply click ‘convert’.