Use Fluid Typography to Make a Responsive Blurb Row
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Get the Divi Theme and Builder - 10% off* - https://divicoaching.com/getdivi
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Build a row with fully responsive blurb modules in Divi using "fluid type"
Following on from a question on the Divi Users Facebook page, in this tutorial I show you every step of creating a a Fully Responsive Divi Blurb Row using Fluid Type! Everything is explained and all of the CSS is included below. ** There is a slight blooper at where I talk about "line spacing" - of course I meant "letter spacing"! Missed it in the edit in my hurry to get the video uploaded! **
00:00 Intro
01:22 Building the Page
04:20 Adding Content
13:20 Adding CSS via the Customizer
15:32 Using the Font-Size Calculator
19:44 Adding a Media Query
20:48 Testing the Final Result
################
Link to responsive calculator here: https://websemantics.uk/tools/responsive-font-calculator/
################
################
Make sure to add this CSS class first in the ROW settings - "Advanced", "CSS ID + Classes:
dc-blurb-row-3
################
/* Full CSS to add to Customizer */
.dc-blurb-row-3 h4 {
margin-top:2em;
padding-left: 5%;
padding-right:5%;
font-size: clamp(14px, calc(0.875rem + ((1vw - 9.81px) * 0.639)), 20px);
min-height: 0vw;
}
.dc-blurb-row-3 p {
padding-left: 5%;
padding-right:5%;
font-size: clamp(12px, calc(0.75rem + ((1vw - 9.81px) * 0.426)), 16px);
min-height: 0vw;
}
.dc-blurb-row-3 p:last-of-type {
margin-bottom:1.5em;
}
.dc-blurb-row-3 .et_pb_button {
margin-left:5%;
margin-bottom:1em;
font-size: clamp(14px, calc(0.875rem + ((1vw - 9.81px) * 0.639)), 20px);
min-height: 0vw;
}
@media all and (max-width: 980px) {
.dc-blurb-row-3 h4 {
font-size: clamp(14px, calc(0.875rem + ((1vw - 3.2px) * 0.9091)), 20px);
min-height: 0vw;
}
.dc-blurb-row-3 p {
font-size: clamp(12px, calc(0.75rem + ((1vw - 3.2px) * 0.6061)), 16px);
min-height: 0vw;
}
.dc-blurb-row-3 .et_pb_button {
font-size: clamp(14px, calc(0.875rem + ((1vw - 3.2px) * 0.9091)), 20px);
min-height: 0vw;
}
}
Видео Use Fluid Typography to Make a Responsive Blurb Row канала DiviCoaching
Get the Divi Theme and Builder - 10% off* - https://divicoaching.com/getdivi
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Build a row with fully responsive blurb modules in Divi using "fluid type"
Following on from a question on the Divi Users Facebook page, in this tutorial I show you every step of creating a a Fully Responsive Divi Blurb Row using Fluid Type! Everything is explained and all of the CSS is included below. ** There is a slight blooper at where I talk about "line spacing" - of course I meant "letter spacing"! Missed it in the edit in my hurry to get the video uploaded! **
00:00 Intro
01:22 Building the Page
04:20 Adding Content
13:20 Adding CSS via the Customizer
15:32 Using the Font-Size Calculator
19:44 Adding a Media Query
20:48 Testing the Final Result
################
Link to responsive calculator here: https://websemantics.uk/tools/responsive-font-calculator/
################
################
Make sure to add this CSS class first in the ROW settings - "Advanced", "CSS ID + Classes:
dc-blurb-row-3
################
/* Full CSS to add to Customizer */
.dc-blurb-row-3 h4 {
margin-top:2em;
padding-left: 5%;
padding-right:5%;
font-size: clamp(14px, calc(0.875rem + ((1vw - 9.81px) * 0.639)), 20px);
min-height: 0vw;
}
.dc-blurb-row-3 p {
padding-left: 5%;
padding-right:5%;
font-size: clamp(12px, calc(0.75rem + ((1vw - 9.81px) * 0.426)), 16px);
min-height: 0vw;
}
.dc-blurb-row-3 p:last-of-type {
margin-bottom:1.5em;
}
.dc-blurb-row-3 .et_pb_button {
margin-left:5%;
margin-bottom:1em;
font-size: clamp(14px, calc(0.875rem + ((1vw - 9.81px) * 0.639)), 20px);
min-height: 0vw;
}
@media all and (max-width: 980px) {
.dc-blurb-row-3 h4 {
font-size: clamp(14px, calc(0.875rem + ((1vw - 3.2px) * 0.9091)), 20px);
min-height: 0vw;
}
.dc-blurb-row-3 p {
font-size: clamp(12px, calc(0.75rem + ((1vw - 3.2px) * 0.6061)), 16px);
min-height: 0vw;
}
.dc-blurb-row-3 .et_pb_button {
font-size: clamp(14px, calc(0.875rem + ((1vw - 3.2px) * 0.9091)), 20px);
min-height: 0vw;
}
}
Видео Use Fluid Typography to Make a Responsive Blurb Row канала DiviCoaching
divi blurb module divi blurb designs divi blurb button divi blurb settings divi divi tutorial divi coaching divi lesson divi builder divi fluid typography divi theme tutorial divi builder tutorial divi theme divi blurb how to make divi responsive divi responsive tutorial divi design for mobile make divi responsive divi for mobile divi course divi builder for beginners divi theme builder tutorial divi css divi blurb module button divi responsive
Комментарии отсутствуют
Информация о видео
9 февраля 2022 г. 23:47:05
00:22:44
Другие видео канала