Скачать с ютуб Use Fluid Typography to Make a Responsive Blurb Row в хорошем качестве

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/respons... ################ ################ 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; } }