No video :(

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

Подписаться 81 тыс.

Просмотров 6 тыс.

50% 1

The Clamp() function is amazing for responsiveness across your website. Here's how to make it work for a Hero Banner.
Calculator: websquadron.co...
Book your 1-2-1 Consultation: websquadron.co...
Why Clamp() improves Responsiveness for your Wordpress Website - Font -Images - Margins and Paddings
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co...
🔗 All of our Important Links: websquadron.co...
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com...
😃 Get Elementor Pro: be.elementor.c...
😃 Boost your RU-vid Analysis: www.tubebuddy....
👕 Get our Merchandise: websquadron.co...
🥹 Support us: paypal.me/Webs...
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩‍💻 Visit websquadron.co.uk

Опубликовано:

29 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 50

@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.

@ozartdesign 11 месяцев назад

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

@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.

@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.

@gotta-date-with-hate Год назад

This was an excellent video. I found clamp calculator on another channel but they really didn't explain it fully..

@rg-web-design Год назад

Awesome work mate!

@borisnieminen677 Год назад

Excellent

@adamjenei1411 5 месяцев назад

This is 🤤🤤🤤🤤

@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.

@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.

@catnipchronicles 10 месяцев назад

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 10 месяцев назад

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

@catnipchronicles 10 месяцев назад

@@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

@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

@GARdotETH 7 месяцев назад

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

@websquadron 7 месяцев назад

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

@GARdotETH 7 месяцев назад

@@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.

@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.

@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.

@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

@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/

@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?

@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....

@catnipchronicles 10 месяцев назад

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.