ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
Make your Fonts Responsive with Font Clamp - Shrink and Enlarge - Elementor Wordpress Tutorial
ฝัง
- เผยแพร่เมื่อ 16 พ.ย. 2022
- 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-size.app/
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.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your TH-cam Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk
Font clamp is a cool css function, thanks for sharing Imran.
This is good for headings, not for long texts where you can't adjust the line height based on size of the font.
This solves my issue from earlier this week - will sit and go through my font sizes at the weekend.
I can't express my appreciation enough.. this solves a lot of my issues.. thank you brother for bringing this up..
You are most welcome
Great video about font responsiveness! Thank you!
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?
where to put this in elementor?
Fantastic. I'm going to fix this tomorrow!
An extraordinary guide!
Excellent work. Keep it up.
Thanks Imran, that was great, cheers
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 ;)
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 :)
This is fantastic 🎉
Thankyou! responsive super smooth!
You bet!
Saving the day.
thanks a million,, this helped me with my work.
You're welcome!
My Matter Solved, thank you
Containers Queries are another gift from God 🎁😍😅😍😍😍
Clamp function is like a gift from God 🎁😍😅
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.
Nice one :)
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.
Good point - not completely sure
@@user.94827 Yes, that's sad, but you can mix units. A common way to make it zoomable is to use vw + rem value.
@@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.
I found that within the app, I can change the PX to REM. I'm hoping this will make it even more usable.
Definitely do that
Is there any improvement on SEO scores using clamp vs pixels or rem? Moreover for accessibility issues?
Good question.
I would hazard a guess that although it won't improve SEO, it would impact on better accessibility.
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?
I leave them unset :)
@@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)
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!
Yes as ling as you remove the Toggle Breakpoint in your Nav Settings
Hey isn't it same as vw?
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
Yup let me check
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
I would always say do REM for font
Is it not the same thing to use vh as the font size in elementor?
You could, but I don't like using that. REM all the way.
@@websquadron ok thanks!
Can’t the clamp code be placed where you would normally choose font size
Not tried that route. (Yet).
How does that can work with global settings ?
You would still use Global Fonts for the Font Family. But for Typography, leave it blank.
Font clamp not working different devices. Exa samsung galaxy mobiles not working any solution ?
Are you sure as I don’t have issues with other devices
Easier rem calculation based on multiples of 10, but still having 16px body font size.
html {
font-size: 62.5%
}
body {
font-size: 16px;
}
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
Can you paste exactly the code you used below.
@@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);}
@@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.
@@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)
I just tried it without the inner section as well but getting the same result, so i am guessing that shouldn't be it.