Using REM and Clamp to build BETTER Website Responsiveness - Fonts Margins Paddings Tutorial

[@joshlyons1005]

I've been struggling with this and this here is the best explanation and method I've seen. Really appreciate this brotha!

[@Jim.Hummel]

This really helps take the anguish and frustration of working with various breakpoints. Such as handy feature, especially since you can de-couple your heading tags from the font size. This allows proper SEOing of titles, subtitles, and sibling headings without being locked into a given font size.

[@cablo69]

Best explanation of the clamp function i have seen. Thank you, Imran.

[@websquadron]

Glad you liked it

[@stevemarrs3149]

You absolute legend!! This makes things so much better when it comes to formatting desktop design for tablet and mobile. Excellent work as always. I’m thinking I may set of a draft page for new sites with headers, text, buttons etc all set up so I can just copy and paste the style across to each relevant section as and when needed.

[@Am_ro12]

I love this, thank you. But my hurdle here is, yes I use REM, and I want the clamp. But I use the global styling, not typography styling. I do this, so that I can choose if I want a H1 tag as a tiny heading on occasion for seo purposes. Meaning, my type hierarchy is not linked to the title tag. I find this much better for freedom of design. Is there a way to still use this amazing concept you created, without it being connected to title tags (H1 and so on), and by having your HTML connected to your global styles you create instead? Also, why can you not use extra breakpoints? Set everting below 1440px to VW and the. Mobile and widescreen as REM to clamp.

[@scottmcintyre5543]

I follow this exact same design pattern with my typography primarily for SEO purposes. Maintaining a pleasing design while using H1 elements at small "label" sizes if I need to. It would be great to "disconnect" clamp from the H hierarchy in some simple way.

[@katiareis703]

Thank you so much!

[@ManoMomen]

thats amazing Imran 👏 do you have any recommendation about the size of H1~H5 & p sizes?

[@websquadron]

I do let me dig it out or I’ll do a video to share

[@ManoMomen]

@@websquadron that would be great 👏 i am waiting.

[@michaelzorko4349]

Thank you - question - how do you handle line height with this approach?

[@websquadron]

If my REM Min and Max are 1 REM and 4 REM, then the line height maybe 1.3REM and 4.3REM. You may add 0.2, 0.3, 0.4, 0.5, etc as a constant. Check and test as suitable line height will vary based on Font Family.

[@michaelzorko4349]

Thank you for the reply. I really appreciate the extent to which you go to share knowledge. @@websquadron

[@dominik.szewior]

Thank you :)

[@michaelfoerster3364]

Do you use it at the global font styles, bcs if we do it on the element it won't be so maintainable? E.g if the client wants to increase it later?

[@websquadron]

Once I know the codes then I go back and apply. I usually make my decisions after the hero and the first text heavy container.

[@elon0099]

Nice, btw will you ever teach web development using PHP and database? I mean website based on coding only instead of elementor

[@websquadron]

Not with just coding as even I struggle or get myself mixed up. It’s like painting. Give me canvas as a set of painting brushes and I may get it more wrong that right. Give me a tool like photoshop and I’ll rustle up digital art. The tools help me.

[@rodlivz]

Thanks for this Imran... I'm currently working on a project and facing this very issue especially on different screen sizes. The issue im having is Vh values and rems looking different in different screen sizes and orientation. The biggest challenge is on mobile horizontal views... All the sizes are off, especially my sections so I've revereted back to pixels! Let me know if you need a link.

[@websquadron]

Are you using VH for the height of the Container etc?

[@rodlivz]

@@websquadron Yes, was using VH. I'm guessing that's what is affecting it.

[@Art-01]

Thank u for sharing

[@Restoredetailaz]

Where do you get your Min & Max px width?

[@websquadron]

I just decide on sizes that prevent it from changing to ultra small and too big.

[@Restoredetailaz]

Alright awesome, I appreciate the help. I think I need to sign up for an hour of training@@websquadron

[@nparasida]

I'm still not able to grasp what's going on here... because you have 8 different settings in the calculator, how do we figure out what each one should be?

[@websquadron]

You don’t have to use each row. If you plan to add to custom css then use the appropriate row. But if you are adding to the custom unit then just use the top row. First select your root html which will be 10 for bricks and 16 for Elementor. Then add your min and max threshold for screen size. Then add your chosen PX or REM size for what you want the smallest and largest sizes to be.

[@PameFigueroa]

Dont work for me, I do it in global fonts and dont work, if you can help me thank you

[@websquadron]

Have you cleared out any values in typography?

[@erling5148]

why not just just em for padding and or margin if you do there is no need for clamp....

[@websquadron]

I find it not as good :(

[@erling5148]

@@websquadron what...

[@websquadron]

It’s subjective but I prefer to use REM

[@erling5148]

@@websquadron when you use em for the padding/margin it grows/shrinks with the the font size set in the clamp function, cascading...