Make your Fonts Responsive with Font Clamp - Shrink and Enlarge

No video

Make your Fonts Responsive with Font Clamp - Shrink and Enlarge - Elementor Wordpress Tutorial

Рет қаралды 12,188

Күн бұрын

Using Elementor's breakpoints for Desktop, Tablet, Mobile Font Sizes is fine but you will notice jumps in the fonts as you shrink and grow your page size.
How can you make it more responsive?
With... FONT CLAMP!
And this video will take you through HOW and WHY :)
Here's a Free Tool to massively help you with the Clamp Code: clamp.font-siz...
Make your Fonts Responsive with Font Clamp - Shrink and Enlarge - Elementor Wordpress Tutorial
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 KZfaq 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

Пікірлер: 59

@NOALNOM Жыл бұрын

Another super clever way to set clamp globally is this: h1, h2, h3, p { font-size: clamp( var(--fluid-type-min, 1rem), calc(1rem + var(--fluid-type-target, 3vw)), var(--fluid-type-max, 1.3rem) ); } h1 { --fluid-type-min: 2.5rem; --fluid-type-max: 5rem; --fluid-type-target: 5vw; max-width: 15ch; } h2 { --fluid-type-min: 2rem; --fluid-type-max: 4.5rem; --fluid-type-target: 4vw; } h3 { --fluid-type-min: 1.5rem; --fluid-type-max: 2.5rem; } h2, h3 { max-width: 30ch; } p { --fluid-type-min: 0.9rem; --fluid-type-max: 1rem; --fluid-type-target: 2vw; max-width: 60ch; } // AMAZING HUH?

@rendeta.studio 5 ай бұрын

where to put this in elementor?

@jaoortega Жыл бұрын

I can't express my appreciation enough.. this solves a lot of my issues.. thank you brother for bringing this up..

@websquadron Жыл бұрын

You are most welcome

@stevemarrs3149 Жыл бұрын

This solves my issue from earlier this week - will sit and go through my font sizes at the weekend.

@NOALNOM Жыл бұрын

Containers Queries are another gift from God 🎁😍😅😍😍😍

Ай бұрын

This is good for headings, not for long texts where you can't adjust the line height based on size of the font.

@theskatingchoreographer Жыл бұрын

First one to like, first one to watch, first one to comment, first one to enjoy (yet again) your amazing content my friend! I'm on the top of my game and so you are ;)

@websquadron Жыл бұрын

Big thanks. This video has been long overdue and I was always worried about explaining it and making sense of it. Luckily the tool helps to get the correct code across better :)

@mazlanhalim9141 Ай бұрын

Font clamp is a cool css function, thanks for sharing Imran.

@saucydee1 Жыл бұрын

Fantastic. I'm going to fix this tomorrow!

@ChillFox_ 3 ай бұрын

Saving the day.

@NOALNOM Жыл бұрын

Clamp function is like a gift from God 🎁😍😅

@dicky3925 Жыл бұрын

Thankyou! responsive super smooth!

@websquadron Жыл бұрын

You bet!

@WilhelmCazimirovici 6 ай бұрын

Great video about font responsiveness! Thank you!

@PicSta Жыл бұрын

Clamp is like min, a desired size, and a max size for the text. The min and the max are pretty much self-explanatory, but the two values for the desired width is the important part. The vw unit alone causes issues with zoom sizes (scaled resolutions) but the rem unit makes it zoomable. Try to zoom the text without the rem for the middle value, it fails. I hope this helps to understand it even better.

@websquadron Жыл бұрын

Nice one :)

@user.94827 Жыл бұрын

I understand it, but the concern is when Browser Zoom feature is triggered why doesn't it affect Viewport Width. If it did so, VW would be the greatest Unit.

@websquadron Жыл бұрын

Good point - not completely sure

@PicSta Жыл бұрын

@@user.94827 Yes, that's sad, but you can mix units. A common way to make it zoomable is to use vw + rem value.

@user.94827 Жыл бұрын

@@PicSta It only makes small difference. Just to give user a false sense of zoom out. Another things what's the max size you're designing a website. Nowadays, desktop have become so huge.

@fabrictexture4767 Жыл бұрын

My Matter Solved, thank you

@mrrobotweb Жыл бұрын

thanks a million,, this helped me with my work.

@websquadron Жыл бұрын

You're welcome!

@user-wm2ep3sh9o Жыл бұрын

An extraordinary guide!

@soraclemedia Жыл бұрын

Excellent work. Keep it up.

@bySterling Жыл бұрын

This is fantastic 🎉

@borisnieminen677 Жыл бұрын

Thanks Imran, that was great, cheers

@johnboyd8053 Жыл бұрын

I found that within the app, I can change the PX to REM. I'm hoping this will make it even more usable.

@websquadron Жыл бұрын

Definitely do that

@elevateyourcreativeness Жыл бұрын

Is there any improvement on SEO scores using clamp vs pixels or rem? Moreover for accessibility issues?

@websquadron Жыл бұрын

Good question. I would hazard a guess that although it won't improve SEO, it would impact on better accessibility.

@lucylink7975 Жыл бұрын

I can't tell you the amount of time I have spent fiddling about making a standard, reusable/adaptable set of @media queries for big text areas in the last couple of months. And along you come with this. I just dumped mine, this is brilliant and you sir are a hero. One question, if you are going to use this site-wide, what do you put in the global styles? Or do you just leave them unset?

@websquadron Жыл бұрын

I leave them unset :)

@lucylink7975 Жыл бұрын

@@websquadron So glad. I don't like using global styles much at all but always feel guilty when I don't (for some reason or another, not even sure why lol)

@elevateyourcreativeness Жыл бұрын

Can’t the clamp code be placed where you would normally choose font size

@websquadron Жыл бұрын

Not tried that route. (Yet).

@tas5247 Жыл бұрын

Is it not the same thing to use vh as the font size in elementor?

@websquadron Жыл бұрын

You could, but I don't like using that. REM all the way.

@tas5247 Жыл бұрын

@@websquadron ok thanks!

@mahadewalid8813 Жыл бұрын

Easier rem calculation based on multiples of 10, but still having 16px body font size. html { font-size: 62.5% } body { font-size: 16px; }

@ekikoo Жыл бұрын

Hi! Could this idea be implemented to nav menus that have many pages, to prevent that on smaller laptop screens the menu items stack into two rows? Assuming there's a logo on the left side, and social icons on the right side of the menu column... Thanks!

@websquadron Жыл бұрын

Yes as ling as you remove the Toggle Breakpoint in your Nav Settings

@hammadshahzad7738 5 ай бұрын

Hey isn't it same as vw?

@nemo6630 Жыл бұрын

hello, can we hope for an update of this same tutorial ? because with 3.10 we can do it natively but I can't find any documentation

@websquadron Жыл бұрын

Yup let me check

@sanjeevd6872 Жыл бұрын

Font clamp not working different devices. Exa samsung galaxy mobiles not working any solution ?

@websquadron Жыл бұрын

Are you sure as I don’t have issues with other devices

@IsaacTannerDempsey Жыл бұрын

could you do a dirty fast version on this em or rem. Better share the code to paste in the that includes all the title styles h1, h3 ect tags

@websquadron Жыл бұрын

I would always say do REM for font

@muziekmindtwister Жыл бұрын

I did exactly like described but it does not change anything for me. What can be the issue ? Spend a whole day to figure this out :S

@websquadron Жыл бұрын

Can you paste exactly the code you used below.

@muziekmindtwister Жыл бұрын

@@websquadron Wow , thanks for the fast reply. Certainly. I tried both but on the first part it's already doing nothing. (Previous to clamp generator) P { font-size: clamp(1rem, 2vw, 5rem);}

@websquadron Жыл бұрын

@@muziekmindtwister No probs. Where are you adding this? To the custom css of the website or to a field? Also have you made sure that there are no preset sizes in the global fonts or the typography.

@muziekmindtwister Жыл бұрын

@@websquadron Yes, i did had a global font at first, but for this instance i deleted it to be sure and reinserted the text. The text is next to a an image within an inner section in case that matters. (i tried it on a costum css first)

@muziekmindtwister Жыл бұрын

I just tried it without the inner section as well but getting the same result, so i am guessing that shouldn't be it.