Загрузка...

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
Яндекс.Метрика

На информационно-развлекательном портале SALDA.WS применяются cookie-файлы. Нажимая кнопку Принять, вы подтверждаете свое согласие на их использование.

Об использовании CookiesПринять