Another wonderfully executed tutorial, Paul! You have quite a gift. I can't believe I wasn't already subscribed! I am not much of a video watcher, but I thoroughly enjoy yours. You make everything seem so easy to execute and understand both.
Thanks Terry, you really are too kind. This is my tenth tutorial and I am really having fun. This one took a fair bit of work to get everything how I wanted it but I am really pleased with the result. On to the next one....
@@divicoaching May I ask what software you are using? Not worried about the hardware as I already have all that. Just curious what you use to make such a clever production.
OBS (Open Broadcast Studio) and DaVinci Resolve 17. Figma for the odd SVG graphics. A cheap webcam and a Yeti Nano mike. All of the software is free.....
Oh my... I believe you've dropped me down rabbit hole with DaVinci Resolve... it looks wonderful. I'm familiar with the Adobe tools, but got tired of paying monthly for the little use I got out of them at the time.
All your tutorials are really awesome. I wish you would do more of this. I have seen a lot of tutorials on DIVI on youtube. Yours really stands out! It adds a lot of value and the explanation is also simple and spot on. Thank You and hope to see more of your tutorials!
Hello Paul, I share Terry Hale's sentiments. You just became my go-to Divi tutor, even though I am not a beginner. The joy of clamp() and fluid dynamic element resizing has fascinated me since it first appeared in CSS3, but we still rarely see it being used. Guess you have a lot more great tips, so I am subscribed :)
Thank you! I am a bit behind with adding tutorials at the moment as work keeps getting in the way! More soon though and I plan more on responsive sizing.
Hi Paul, another wonderful video! Thank you for your coaching. Do you have a video or is there any way you could do a video on modifying the mobile dropdown hamburger menu? I'm hoping to achieve the following: Opening the mobile menu opens it in the full viewport (height & width). The primary menu item labels should all be left justified and there should be a dropdown logo on each primary menu item which has sub-items (which should be right justified). Clicking on the dropdown logo should expand the primary menu item and show the sub-items (which are hopefully indented to the right by some amount). I realize this is asking a lot, but it just feels to me like this sort of mobile menu layout should be standard or easily settable in Divi anyways!
You could try Nelson's vid How To Customize And Style The Divi Mobile Menu - Pee-Aye Creative www.peeayecreative.com/how-to-customize-and-style-the-divi-mobile-menu/
Yes, you should be able to. How will depend a bit on how your site is set up. If you are using the default header (not theme builder) then you can follow the tutorial and assign the new, theme builder header, to your site. If it is already using the theme builder then just build a new theme builder header and assign that. The only issue would be if your site uses different headers for different pages in which case you might need to build more than one new one. Back up first!
Yes absolutely. The use of fluid typography based on CSS clamp is becoming more.and more popular. See here for a decent article which explains it well blog.logrocket.com/fluid-vs-responsive-typography-css-clamp/
Hello Paul and thank you very much for your very well explained video.👏 I have a question, please, does the code you have done work if I prefer to make a header with 3 modules (image - menu - button) or do I have to add xode css? if so, can you help me please? thank you again and good luck 🙂
Thanks for the video. I've seen many similar tutorials but am yet to see anyone explain (simply) how to arrive at the middle value (vw) in the clamp formula without a lot of frustrating trial and error. Do you have any tips on arriving at this value so that if e.g. max is 23px and min is 16px, how do you arrive at a vw figure that will linearly reduce or increase in size between the max and min values? Many thanks
Unfortunately it's not very easy. The smoothest linear transition would be achieved using purely a VW value, but this would come at the expense.of accessibility so there is always a compromise. This is the best article on this I've found but there is quite a lot to digest.. www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
It would but to make it scale you would have to put all three elements in one column and then use flexbox to space them out. You would then need to adjust and probably hide the socials on phone. Possible but a bit of fiddling.
I love your tutorials! I wish there were more of them. You are an excellent teacher. I am having a terrible time when it comes to making my Divi design responsive. Modules that display fine in desktop mode just disappear for no apparent reason in responsive mode. When I display layers and to into the settings for a text module that displays fine in desktop mode, the text box is blank!!! Other modules simply disappear as well (image, etc.). This occurs in Safe Mode as well. I am at wit's end! Any ideas as to why this might be happening? I've googled this extensively, but to no avail.
Thanks Michael. I will have a think about some of the more common things that might be causing your problems. Are these recent (i.e. following the various update in the last few weeks) or longer standing issues?
@@divicoaching Thanks for the quick response! I would say this is a more recent issue. I've not encountered this until fairly recently (last month or so?).
Say you wanted to target an h1 in a text module. I would give the module a custom class name - say 'my-text' in the 'Settings>Advanced>Custom ID and Classes'. Then target with : .my-text h1 { font-size: clamp(20px, calc(1.25rem + ((1vw - 3.2px) * 1.75)), 48px); } This will dynamically size between 20px and 48px based on screen size. The calc comes from an online calculator here: websemantics.uk/tools/responsive-font-calculator/ Choose PX. Set the range (min and max) and viewport (screen size) min and max that you want. Make sure just "clamp" is ticked at the bottom. Then cut and paste just the font-size expression as above. The calc just works a bit better but you can just use a vw value for the middle value like (20px, 2vw,48px).
Hi Paul in the code you have duplicated the comment /* Use 'clamp function to size logo */, it is the same for the anchor tag. Thanks for the great videos!
great tutorial - unusual comments in CSS: (/* Enable full menu on tablet /) - don't seem to work in my browser - Comment convention am not aware of? - thanks for your no nonsense approach & tutorials
Thank you. The CSS should enable the full menu (rather than hamburger) on tablet.It's been a while since I looked at the CSS so I'll have another look.
@@tonyybarra3185 Thank you. Yes I am working on one at the moment. Work keeps getting in the way! My own site is also under construction but hopefully ready soon.
@@divicoaching thanks for the response. Please let me know when your site is up I'd be interested in seeing your content. Do you offer any type of course material?
Another wonderfully executed tutorial, Paul! You have quite a gift. I can't believe I wasn't already subscribed! I am not much of a video watcher, but I thoroughly enjoy yours. You make everything seem so easy to execute and understand both.
Thanks Terry, you really are too kind. This is my tenth tutorial and I am really having fun. This one took a fair bit of work to get everything how I wanted it but I am really pleased with the result. On to the next one....
@@divicoaching May I ask what software you are using? Not worried about the hardware as I already have all that. Just curious what you use to make such a clever production.
OBS (Open Broadcast Studio) and DaVinci Resolve 17. Figma for the odd SVG graphics. A cheap webcam and a Yeti Nano mike. All of the software is free.....
Oh my... I believe you've dropped me down rabbit hole with DaVinci Resolve... it looks wonderful. I'm familiar with the Adobe tools, but got tired of paying monthly for the little use I got out of them at the time.
@Terry Hale You just need the free one here www.blackmagicdesign.com/products/davinciresolve/
Days of free fun... :)
All your tutorials are really awesome. I wish you would do more of this. I have seen a lot of tutorials on DIVI on youtube. Yours really stands out! It adds a lot of value and the explanation is also simple and spot on. Thank You and hope to see more of your tutorials!
🙏 thank you for your kind words. There will be more quite soon!
Excellent video tutorial! Your explanations and demonstrations are super clear and so practical!
Thank you!
Hi Mr. Paul, You are such a good teacher and enlight my Divi life, thank you, blessing.
Wow, thank you, That is very kind.
You taught me something new!Thank you
Every day is a school day! :)
Hello Paul, I share Terry Hale's sentiments. You just became my go-to Divi tutor, even though I am not a beginner. The joy of clamp() and fluid dynamic element resizing has fascinated me since it first appeared in CSS3, but we still rarely see it being used. Guess you have a lot more great tips, so I am subscribed :)
Thank you! I am a bit behind with adding tutorials at the moment as work keeps getting in the way! More soon though and I plan more on responsive sizing.
Brilliant...I've been thinking about this for quite a long time.....
Oh good. Clamp is a really flexible and powerfull bit of CSS to learn.
Great video. there should be more videos of this quality!
Thanks Fabian. That is very kind. I hope to make some more very soon....
Best coach I have seen…!
I'm very flattered. Just need some time away from my day job to make more!
Thanks a lot for your excelent tutorials!!
Thanks Sabine. I am very happy if you find them useful.
Thank you very much for sharing your knowledge! Very well, precise and clear explained. And you have saved my day too.
Thank you. Glad it was helpful!
Hi Paul, another wonderful video! Thank you for your coaching. Do you have a video or is there any way you could do a video on modifying the mobile dropdown hamburger menu? I'm hoping to achieve the following:
Opening the mobile menu opens it in the full viewport (height & width).
The primary menu item labels should all be left justified and there should be a dropdown logo on each primary menu item which has sub-items (which should be right justified).
Clicking on the dropdown logo should expand the primary menu item and show the sub-items (which are hopefully indented to the right by some amount).
I realize this is asking a lot, but it just feels to me like this sort of mobile menu layout should be standard or easily settable in Divi anyways!
Hi Brian. I don't have one as there are a few out there, which is the main reason I haven't made one yet. It is on the list.
@@divicoaching do you happen to have a suggestion for whom I might look to?
You could try Nelson's vid How To Customize And Style The Divi Mobile Menu - Pee-Aye Creative www.peeayecreative.com/how-to-customize-and-style-the-divi-mobile-menu/
Subscribed! I have a completed site. Can I "retrofit" this to my existing header?
Yes, you should be able to. How will depend a bit on how your site is set up. If you are using the default header (not theme builder) then you can follow the tutorial and assign the new, theme builder header, to your site. If it is already using the theme builder then just build a new theme builder header and assign that. The only issue would be if your site uses different headers for different pages in which case you might need to build more than one new one. Back up first!
Good to have learnt something new here i.e. the Clamp function. Thank you!
Can we have a tutorial on Divi Mobile Menu that covers Full Screen?
Thanks Jaspreet. I am getting quite a few requests for something on menus so will have a look at making something on this.
Is this something you still use here in 2024 ? Really interesting this. Going to see how I can use this for a mega menu I am about to use
Yes absolutely. The use of fluid typography based on CSS clamp is becoming more.and more popular. See here for a decent article which explains it well blog.logrocket.com/fluid-vs-responsive-typography-css-clamp/
Hello Paul and thank you very much for your very well explained video.👏
I have a question, please, does the code you have done work if I prefer to make a header with 3 modules (image - menu - button) or do I have to add xode css? if so, can you help me please?
thank you again and good luck 🙂
Hi. This is not super straightforward and would need a bit more code. I will have a look and see what is involved!
@@divicoaching Thank you
Subscribed!
Thank you!
Brilliant
Too kind - thank you!! 😀
Thanks for the video. I've seen many similar tutorials but am yet to see anyone explain (simply) how to arrive at the middle value (vw) in the clamp formula without a lot of frustrating trial and error. Do you have any tips on arriving at this value so that if e.g. max is 23px and min is 16px, how do you arrive at a vw figure that will linearly reduce or increase in size between the max and min values? Many thanks
Unfortunately it's not very easy. The smoothest linear transition would be achieved using purely a VW value, but this would come at the expense.of accessibility so there is always a compromise. This is the best article on this I've found but there is quite a lot to digest.. www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
Would his work with 3 elements in the header (logo, menu, and social media icons)?
It would but to make it scale you would have to put all three elements in one column and then use flexbox to space them out. You would then need to adjust and probably hide the socials on phone. Possible but a bit of fiddling.
I love your tutorials! I wish there were more of them. You are an excellent teacher. I am having a terrible time when it comes to making my Divi design responsive. Modules that display fine in desktop mode just disappear for no apparent reason in responsive mode. When I display layers and to into the settings for a text module that displays fine in desktop mode, the text box is blank!!! Other modules simply disappear as well (image, etc.). This occurs in Safe Mode as well. I am at wit's end! Any ideas as to why this might be happening? I've googled this extensively, but to no avail.
Thanks Michael. I will have a think about some of the more common things that might be causing your problems. Are these recent (i.e. following the various update in the last few weeks) or longer standing issues?
@@divicoaching Thanks for the quick response! I would say this is a more recent issue. I've not encountered this until fairly recently (last month or so?).
Hi Paul, how would you do this for h1 or p? Thanks.
Say you wanted to target an h1 in a text module. I would give the module a custom class name - say 'my-text' in the 'Settings>Advanced>Custom ID and Classes'. Then target with :
.my-text h1 {
font-size: clamp(20px, calc(1.25rem + ((1vw - 3.2px) * 1.75)), 48px);
}
This will dynamically size between 20px and 48px based on screen size. The calc comes from an online calculator here:
websemantics.uk/tools/responsive-font-calculator/
Choose PX. Set the range (min and max) and viewport (screen size) min and max that you want. Make sure just "clamp" is ticked at the bottom. Then cut and paste just the font-size expression as above. The calc just works a bit better but you can just use a vw value for the middle value like (20px, 2vw,48px).
Hi Paul in the code you have duplicated the comment /* Use 'clamp function to size logo */, it is the same for the anchor tag. Thanks for the great videos!
Thank you. I'll have a look at the comments! Glad you are enjoying my videos.
OK I have fixed that now. Thanks for pointing this out.
great tutorial - unusual comments in CSS: (/* Enable full menu on tablet /) - don't seem to work in my browser - Comment convention am not aware of? - thanks for your no nonsense approach & tutorials
Thank you. The CSS should enable the full menu (rather than hamburger) on tablet.It's been a while since I looked at the CSS so I'll have another look.
@@divicoaching the CSS works fine - perfect solution - just the comments throw an error /* odd format */
Oh I see. Is the second * there? Should be /* comment */
@@divicoaching yup - i thought at first it was a new short hand for css commenting that i'd missed?
superrr
Thank you!
Hello where I can contact you sir
UA-cam@divicoaching.com
will you be making further turorilas. They are very well done! Your site seems to be down ...
@@tonyybarra3185 Thank you. Yes I am working on one at the moment. Work keeps getting in the way! My own site is also under construction but hopefully ready soon.
@@divicoaching thanks for the response. Please let me know when your site is up I'd be interested in seeing your content. Do you offer any type of course material?