6 Methods for Creating Fluid Typography and How to Use them in Divi

Default Set without Fuild Options

Fluid Typography in Divi

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Fluid Images and Fluid Text Banner I made.

Fluid Images and Fluid Text Banner I made.

FluidĀ  Images

Above example use VW as size for image and text. Text is POSITIONED to get effects.

With 0% width, vertical text can be achieved.

Fluid Images and Fluid Text Banner I made.

Fluid Images and Fluid Text Banner I made.

FluidĀ  Images

Position Left Corner with red bg, and copy of two text modules placed absolutely at left corner to create shadow. If you need animated text use DIVI essential.

 

Main learning is making the above RESPONSIVE using VW – viewport width as a unit so on all screen sizes the image and text remains placed with looks maintained.

#1 Using a VW Length Unit for Font Size (useful but limiting)

Fluid Typography in Divi

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module .

font-size: 5vw

#2 Using Calc() and VW Length Unit for Font Size

Fluid Typography in Divi

font-size:calc(3em + 2vw)!important

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.