No video :(

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

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

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

50% 1

Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co...
Book your 1-2-1 Consultation: websquadron.co...
FREE Clamp Calculator: websquadron.co...
Using REM and Clamp to build BETTER Website Responsiveness - Fonts Margins Paddings 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 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

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@joshlyons1005 Год назад

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

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

@cablo69 Год назад

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

@websquadron Год назад

Glad you liked it

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

@katiareis703 Год назад

Thank you so much!

@dominik.szewior Год назад

Thank you :)

@amrobbie Год назад

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

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.

@Art-01 Год назад

Thank u for sharing

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

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

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

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

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

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

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

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

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

Where do you get your Min & Max px width?

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

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

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

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

@user-jt4wx8ix4v 3 месяца назад

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

@websquadron 3 месяца назад

Have you cleared out any values in typography?

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

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