Very nice! I followed along and created my own Responsive Blurb Row and hope to use it again going forward. There was a small blooper around 8:42 when you said you were going to add a little bit of line spacing when it was actually letter spacing. Not a biggie unless your really new to Divi. Thanks for putting this together!
Thanks Ken and pleased you followed along. I spotted the blooper but too late to even add a note on screen as there is no going back when hit the publish button. I'll put a note in the description.
Thank you for all your effort. I have seen many tutorials about DIVI but no one has actually been able to explain or solve the response problems. I really hope we can learn more from you here. Best regards from Tenerife
Thank you. I have more videos planned but ideally would like to make these for Divi 5 so I don't have to re-make them all. Making a site truly responsive is always hard with any page builder as there are so many different screen sizes to cater for. I would very much like to be in Tenerife at the moment!!
You are great with your style of coaching when it comes to anything "Fully Responsive Divi Module rows with Fluid Type"! I wish others will learn from you. Your coaching makes real live any devices fully truly Responsive! Wow👍🏾
This is much more difficult. You would have to define a fixed height for the title (a separate text module to the body) sized for a two-line title (as long as you can keep the title to two lines). There are other methods but all are quite advanced.
@@divicoaching would love to see a video on how flex is integrated with divi. In other words, where it's automatically generated and where a manual CSS is needed.
Hi. I've not had a chance to try it. I use Divi and also Oxygen. However good a new tool, there is a big learning curve to get the most from it and I only have a limited amount of time right now. I may have a look in the future...
Loved the tutorial, but I have one question. I'd like the three columns to continue to display in 1 row left to right when you switch to tablet view. What changes in code would this take to accomplish? Thank you!
Hi Marcus. Thank you for your feedback. You need to add a media query to set the number of columns at responsive sizes. There is a good guide here divimundo.com/en/blog/change-number-of-columns-on-mobile-in-divi/. Let me know if you any have issues getting this to work.
@@divicoaching I just came across a new problem that brought me back to this video. When I switch to mobile view the three columns no longer keep the same height. I've double checked that I did everything your tutorial said. Do you know why this might be happening?
Hi Marcus. The issue is that when you choose 'equalise column heights' in a row this only applies when these are columns i.e. next to each other. Once stacked they are rows rather than columns so you need to go in and for tablet/phone setting only change the padding to make your layout work.
Such a great tutorial - I really like how well and Calm you explain things. 👍🏻 If you ever get the time I would love a simple explanation about finding the correct class/id in divi using the inspektor tool… when it comes to @mediaqueries specifific elements
Thanks Anders. I'm very pleased you found this useful. A good suggestion about finding classes - this can be very confusing. I will look at making something on this. Thanks again for supporting my channel.
@@divicoaching thanx that would be so great - because yes its not all objects that is visibel and showing the ID inside of the divi builder. Also maybe it multiple css/ids I can see people use to natron down etc a woo commerce Burton not showing the correct button color. That was just a example I had yesrerday wishing I would be better to identify how I cold target that Specific issue.
Great video, what a wonderful idea! Do you know how to use the clamp function to target headers? I tried this code to no avail: h2 { font-size: clamp(14px, calc(0.875rem + ((1vw - 9.81px) * 0.639)), 50px); } Many Thanks.
Thank you! Unfortunately it is not quite that easy. Browsers apply CSS rules based on specificity. I have linked to a good explanation of this. Just an H2 selector is not very specific and in Divi there are other, more specific selectors which will take precedance and so your style will not be applied. You can use an "!important" tag but this is not good practice as it is hard to override this when you want to. This is, I am afraid, one drawback of the way Divi works but outweighed by the advantages. The best approach is to build a default preset for each module type you plan to use and style accordingly. www.w3schools.com/css/css_specificity.asp
Very nice! I followed along and created my own Responsive Blurb Row and hope to use it again going forward. There was a small blooper around 8:42 when you said you were going to add a little bit of line spacing when it was actually letter spacing. Not a biggie unless your really new to Divi. Thanks for putting this together!
Thanks Ken and pleased you followed along. I spotted the blooper but too late to even add a note on screen as there is no going back when hit the publish button. I'll put a note in the description.
Thank you for all your effort. I have seen many tutorials about DIVI but no one has actually been able to explain or solve the response problems.
I really hope we can learn more from you here. Best regards from Tenerife
Thank you. I have more videos planned but ideally would like to make these for Divi 5 so I don't have to re-make them all. Making a site truly responsive is always hard with any page builder as there are so many different screen sizes to cater for. I would very much like to be in Tenerife at the moment!!
@@divicoaching always welcome here! 🍷
You are great with your style of coaching when it comes to anything "Fully Responsive Divi Module rows with Fluid Type"!
I wish others will learn from you. Your coaching makes real live any devices fully truly Responsive! Wow👍🏾
Thank you James!
Good ro see you back Paul. Great tutorial again and as usual great timing for my next project 👍
Oh good! Hope to be able to get new ones made much more regularly now.
Hi i follow you from Italy, you are the best teacher on web for divi!
Grazie mille! That is most of my Italian!
Very very helpful for sure. I will be implementing this tonight on my website, thank you.
Thanks Mark. I enjoyed making this one and pushing the CSS a bit.
Very Awesome tutorial!! Thank you so much!! 👏🏻👏🏻👍🏻
Great video, many thanks Paul.
Thanks John. Glad you found it useful.
my struggl the title of each blurb is a different number of words which is impacting the hights and spacing.
This is much more difficult. You would have to define a fixed height for the title (a separate text module to the body) sized for a two-line title (as long as you can keep the title to two lines). There are other methods but all are quite advanced.
@@divicoaching ya I’m using other modules instead . Blurb for title and image maybe , text for body and a button module. I’m trying a few options
Brilliant
Thanks Asit. Great to have your support.
@@divicoaching would love to see a video on how flex is integrated with divi. In other words, where it's automatically generated and where a manual CSS is needed.
What do you think about Zion Builder and how does it compare with Divi? I'm curious what are your taughts.
Hi. I've not had a chance to try it. I use Divi and also Oxygen. However good a new tool, there is a big learning curve to get the most from it and I only have a limited amount of time right now. I may have a look in the future...
Loved the tutorial, but I have one question. I'd like the three columns to continue to display in 1 row left to right when you switch to tablet view. What changes in code would this take to accomplish?
Thank you!
Hi Marcus. Thank you for your feedback. You need to add a media query to set the number of columns at responsive sizes. There is a good guide here divimundo.com/en/blog/change-number-of-columns-on-mobile-in-divi/. Let me know if you any have issues getting this to work.
@@divicoaching I just came across a new problem that brought me back to this video. When I switch to mobile view the three columns no longer keep the same height. I've double checked that I did everything your tutorial said. Do you know why this might be happening?
Hi Marcus. The issue is that when you choose 'equalise column heights' in a row this only applies when these are columns i.e. next to each other. Once stacked they are rows rather than columns so you need to go in and for tablet/phone setting only change the padding to make your layout work.
Such a great tutorial - I really like how well and Calm you explain things. 👍🏻
If you ever get the time I would love a simple explanation about finding the correct class/id in divi using the inspektor tool… when it comes to @mediaqueries specifific elements
Thanks Anders. I'm very pleased you found this useful. A good suggestion about finding classes - this can be very confusing. I will look at making something on this. Thanks again for supporting my channel.
@@divicoaching thanx that would be so great - because yes its not all objects that is visibel and showing the ID inside of the divi builder. Also maybe it multiple css/ids I can see people use to natron down etc a woo commerce Burton not showing the correct button color. That was just a example I had yesrerday wishing I would be better to identify how I cold target that Specific issue.
Great video, what a wonderful idea! Do you know how to use the clamp function to target headers? I tried this code to no avail:
h2 {
font-size: clamp(14px, calc(0.875rem + ((1vw - 9.81px) * 0.639)), 50px);
}
Many Thanks.
Thank you! Unfortunately it is not quite that easy. Browsers apply CSS rules based on specificity. I have linked to a good explanation of this. Just an H2 selector is not very specific and in Divi there are other, more specific selectors which will take precedance and so your style will not be applied. You can use an "!important" tag but this is not good practice as it is hard to override this when you want to. This is, I am afraid, one drawback of the way Divi works but outweighed by the advantages. The best approach is to build a default preset for each module type you plan to use and style accordingly. www.w3schools.com/css/css_specificity.asp