Why Clamp() improves Responsiveness for your Wordpress Website - Font -Images - Margins and Paddings

[@faldskrmsudspring7052]

you really make some super good videos. easy to understand and good humor. Thx 😊

[@websquadron]

Glad you like them!

[@nayanponz7883]

Clamp is the best thing I learn this month, it helps you to skip and save many hours optimizing tablet and mobile responsive, thank you very much for all the tutorials.

[@davidwalls2304]

Thanks Imran for this video on the clamp() function. This definitely gives a much smoother appearance to change in font/padding sizes as the viewport changes.

[@ozartdesign]

You are a dam genius!!!, Thanks this calculator is such a brilliant idea & saves so much dev time. Absolute GOLD :)

[@elevateyourcreativeness]

An awesome video Imran! I have been avoiding using the Clamp() function as I could not ever get it right! This video explained a lot and I believe I can now properly execute it across all my clients site’s! Thank you!

[@harbourdogNL]

Agreed. I'd rather go through the extra labour of changing stuff up for tablet and then again for mobile. Mind you, I'm not doing this for a living either, if I was I might pay more attention to it.

[@EPHONIC]

How do you go from say 18px size at narrower width to maybe 16px on desktop? Trying to have larger text on smaller displays. Great video by the way! Love the step by step and explanations.

[@websquadron]

Do you mean for fonts? In that case you need to use CSS to change the Font Family, and then clamp for the size shift from 18 to 16.

[@turningpointgifts]

Thanks for the amazing content. Why don't we just set the size of text and other elements using vw (viewport width) and let it be responsive and scale that way as opposed to using clamp? What am I not seeing?

[@websquadron]

I find it works better with scaling but I could be wrong

[@turningpointgifts]

@@websquadron I think I'll set the size of the text using vw whenever I want it to scale exactly proportional to the screen width, but I'll use clamp anytime I want it to scale dis-proportionally to the screen width, if that makes sense. I'm a beginner so let me know if you think that's wrong. I absolutely love your videos and would be lost without you.

[@dirtdogdigital3979]

Hi Imran. Gotta admit, this Clamp thing is clamping my poor brain, lol. Question: on your calculator, if I want to make the body font for desktop and tablet be 20pixels but have it be 18px on mobile, then what do I put in for the body minimum font on your sheet? Thanks in advance.

[@websquadron]

You have to enter your min and max width size as well to get the right formula

[@rg-web-design]

Awesome work mate!

[@HoMer-iw8cw]

Nice what is the difference between the tabs /sheets Clamp() vs Clamp() Repeat Size

[@websquadron]

You should not have to enter your sizes once and it copies down across them all rather than setting one by one

[@HoMer-iw8cw]

@@websquadron but there are 2 sheets thats what I meant 2 sheets with different names

[@websquadron]

@@HoMer-iw8cw Yes. Sheet 1 allows you to add individual Widths, whereas the repeat only requires you to enter the min and max width once and then it repeats - you can see the shaded cells.

[@borisnieminen677]

Excellent

[@MatichekYoutube]

would be better to put a class in the container and then set all headings in main css?

[@websquadron]

That's another way too :) But you may end up having many alternate classes to maintain.

[@MatichekYoutube]

@@websquadron you write it once right and then put the class in the needed container?

[@GARdotETH]

Does this still work in Elementor? I'm on the latest Pro version and pasting in any clap codes does not work?

[@websquadron]

Can you share an example code that you’re adding? Have you ensured that there is no value for the tablet and mobile?

[@GARdotETH]

@@websquadron Sorry I was having a blonde moment 👀I was pasting it into the pixel value instead of the custom field. Thanks for the video and help.

[@andrewdjones27]

Does it work for widescreen?

[@websquadron]

Yup that’s why I use it

[@andrewdjones27]

What's the best way to do it so it looks good on widescreen too? max width of 2400px and clamp?@@websquadron

[@pepincuatro2865]

Why doesn't the Wordpress editor recognize the clamp function? I've tried this on the Aditional CSS for the theme but it doesn't acknowledge it (it doesn't appear in the pop-up list and the word clamp is left on black, thus it doesn't have any effect). Am I doing something wrong or is it just that the Wordpress editor doesn't work for that?

[@websquadron]

What are you pasting? Add here.

[@pepincuatro2865]

@@websquadron For example: h2{ font-size: clamp(2rem, 10vw+1rem, 9rem) !important; } I've tried several ways, but it seems to me that this code is too complicated for the Theme Customization Aditional CSS. Maybe it works for Elementor but I already created my website with the default Wordpress editor. I'm using the theme GeneratePress, not sure if that matters.

[@adamjenei1411]

This is 🤤🤤🤤🤤

[@danicahmanisha7663]

One guys help me out.... I've been also working on my responsiveness of my website, and I struggle with the scaleability of my website. What I want is the format that I have on my laptop version to scale it up to a 5K (Amac) format. But I can't figure out......

[@websquadron]

Are you using Boxed width or Full width and are you setting the max and min sizes? We could do a 1-2-1 Consultation.

[@danicahmanisha7663]

@@websquadron I've been using a full width

[@websquadron]

@@danicahmanisha7663 That's okay. Next comes deciding on the margins/paddings and font sizes. You have to accept that sometimes big screens will never look good and they max out at 1400 width inside.

[@mindtrix7617]

I went to your link for the clamp, but it says that the connection is reset when loading the widget on your page

[@websquadron]

Thanks for letting me know. I just double checked and it's all fine. Here: websquadron.co.uk/font-clamp-generator/

[@israelayele69]

It doesnt work for me and have everything set properly. Although i do have 4 break points, its not still working well. When on mobile, it scales down but thee fonts and size isn't precise, its just weird.

[@websquadron]

Did you just add it to desktop and make sure the others are blank?

[@israelayele69]

@@websquadron i did, this is my second time trying this and I am receiving this error

[@israelayele69]

I just noticed it works in the Normal title setting and not the Global setting

[@MrGoalie2012]

you shouldn't have to use a clamp calculator.....it should scale and be responsive natively. it's insane that ta web builder isn't optimized like that already.

[@websquadron]

I agree. I do think that Page Builders and Themes and even WordPress by default should have all of this.

[@erling5148]

line-height....

[@turningpointgifts]

I didn't want my text to wrap and change lines as it scaled with clamp. I wanted 5 words on one line and 6 words on the next line. The problem was that when I added the new line to enforce this layout, my line-height was all messed up as the text scaled. I fixed this by adding line-height: 1.25em but you could use line-height: 1.5em or any value you want. By doing this, the line height scales with the parent element and you don't have to add a clamp specifically for controlling line height. Not sure if that's the best method, but that's what I did.

[@abdullahiowolabi5317]

What if the website is handed off to a designer that has never heard of clamp before, wont he freak out😂

[@websquadron]

Yup hence why I would think about the pros and cons of using it