How To Use CSS Clamp For Fluid Typography In Divi With The Divi Responsive Helper Plugin Tutorial by Pee Aye Creative

How To Use CSS Clamp For Fluid Typography In Divi With The Divi Responsive Helper Plugin

In this tutorial I will give you an overview of CSS clamp and show you how to use it in Divi to make responsive fluid typography.
Categories: Divi CSS Tutorials

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

What Is CSS Clamp?

This is not a course on CSS clamp, it’s a tutorial of how to use it in Divi with our plugin. You can check out tons of other general CSS related resources to learn CSS clamp in-depth, but I’ll give you just the basics of what you need to know if you are new to this. You can also check out some articles on the Elegant Themes blog like this one about making modules responsive. The limitation is that you would need to do it for every module, unlike our plugin which does it once across the entire site. They also have this article about other fluid text options, #6 being about clamp.

CSS clamp allows us to linearly scale text between a set of minimum and maximum sizes as the viewport’s width increases and decreases. The goal is to make the size of an element (or in this case, text size) more predictable. CSS clamp is able to set responsive unit sizes without any media queries. The function uses 3 parameters in a single line, which form a perfect solution for fluid typography. The clamp() function has everything, a starting point to set the minimum font size, a middle area to set the fluid font size, and an ending point to set the maximum font size.

CSS Clamp illustration in Divi by Pee Aye Creative
text-size: clamp(minimum, preferred, maximum);

    Minimum – this fixed value is the minimum threshold for the element and cannot go lower than this. Keep this value in mind as the smallest font size you want for Phone sizes.

    Preferred – this dynamic relative value is what will be outputted unless this value falls below the minimum or above the maximum.

    Maximum – this pixel value is the maximum threshold for the element and cannot go higher than this. Keep this value in mind as the largest font size you want for Desktop sizes.

    Can CSS Clamp Be Used In The Divi Builder?

    No, not with the Divi Builder settings, the input fields will not accept it. The only way you could is by writing the CSS in the Advanced tab of every module, which is quite ridiculous. The one article from the Elegant Themes blog talks about this some. But I have to ask, why make it difficult? At that point, I wouldn’t even bother.

    How To Use CSS Clamp In Divi With The Divi Responsive Helper Plugin

    Now for the good news. It’s very easy and afters the entire site instantly with our Divi Responsive Helper plugin!

    Divi Responsive Helper by Pee Aye Creative 2.2

    Simply choose the clamp parameters you want to use and write or paste them into the font size fields in our plugin settings. Go to Divi>Themes Options>Divi Responsive Helper>Typography.

    example of CSS clamp in Divi using rem units

    You can see in that screenshot that I am using rem units, and that is because it works great in our specific situation, since we have three input fields. If you use pixel values, that works too, but because our plugin settings have an input for each device, it means you need to be more creative with the units like this:

    example of CSS clamp in Divi using pixel unites

    But this is very easy to adjust. And of course you can set the font size for all the headings H1-H6 and for paragraph text, and it only takes a few seconds and it will affect all text on the entire site. Check the video to see how perfectly smooth the text scales from small to big as the viewport changes! Pretty cool?

    9

    Last updated Apr 4, 2022 @ 10:36 pm

    Subscribe

    Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

    Please share this post!

    Nelson Lee Miller (aka The Divi Teacher)

    Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

    Leave A Response!

    By commenting you agree to our Blog & YouTube Comments Policy

    13 Comments

    1. ron

      Hi Nelson. Great post I was looking for a long time. Thanks for that

      I managed the settings in the Responsive pliugin for all H1-6 font sizes and it worked very well. Also with the help of this tutorial: https://www.fluid-type-scale.com/ 😉

      However, the paragraph font-size is not fluid. How do I set these in the plugin??

      Thanks for your help and keep up the good work.

      regards, Ron

      Reply
        • Ron Linders

          I know where it is located but paragraph text sizes for not change.
          They is no overwriting with non standard sizes. I am confused..

        • Nelson Lee Miller (aka The Divi Teacher)

          You will need to remove any other preset/customization to the font size, that’s how our settings work. the feature works, just need to make sure it has priority so if you have any adjustment in the modules, it is designed that way on purpose to override ours.

    2. ron

      as I said, I have no customizations. still no succes with paragraph.

      Reply
    3. clarky

      Do you have a toturial for copy to clipboard? same as what you are using in the tutorial on the top?

      Reply
        • bnbae

          i will be waiting for this also

    4. Neil

      Hi Nelson, Thanks for this tutorial. I’ve been grappling with Clamp and using it in combination with Calc for quite a while now, looking for that magic bullet solution. The problem I’ve always found is trying to determine a way to calculate the ‘preferred’ value without trial and error.
      I’d like to have it so that at the max viewport width e.g. 1920px it is the max value in Clamp. Then is scales down linearly to the tablet break point at 980px. What I’m finding though is that unless the preferred value is correct it will reach the max or min values before the upper and lower breakpoints.

      I currently use a Calc equation in the preferred value that works perfectly but it is very time consuming putting it in all the modules for the three different Divi screen sizes as you pointed out in your video.

      So I guess in summary, how do ‘you’ determine the preferred value?

      Thanks

      Reply
      • Nelson Lee Miller (aka The Divi Teacher)

        Hi Neil,
        Well, I don’t have one, sorry. I’m no way an expert at clamp by any stretch, this was just to show how it’s possible with our plugin.

        Reply
    5. Leslee Langlands

      Thanks for this! It was happenstance that I was looking into clamp the same day you posted this!

      My question is, do you need to set clamp for each of the three displays? I thought that if you set the max to what your desktop would be, and your min to what you phone would be, would it not fill in the rest and you would not need the other two?

      Thanks so much! Love your tutorials.

      Reply

    Submit a Comment

    Your email address will not be published.

    Recent Posts

    Pin It on Pinterest

    0

    Your Cart