Fluid Text
This page demonstrates the Fluid Text feature in Divi Responsive Helper. Fluid text automatically scales between screen sizes using CSS clamp values, allowing headings and body text to smoothly adjust as the browser width changes.
Important Note
The minimum H1 size is set to 24px and the maximum H1 size is 64px. The body text ranges from 16px to 20px. The plugin automatically scales the font size between these values as the screen width changes.
The global viewport range is set from 981px to 1440px. This means fluid scaling starts at 981px and stops at 1440px.
Tip: Resize the browser window to see the text size change dynamically.
Default Font Size
This example shows the default approach where font sizes are manually set in the module for each device (desktop, tablet, and phone).
Heading 3
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 Text Scaling
This example demonstrates fluid text scaling. The heading and body text sizes are defined in the plugin settings, so there is no need to set font sizes for each device in the module. The text automatically scales based on the screen width.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph : 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 Text Scaling – Example 1
In this example, multiple Divi modules such as Blurb, Accordion, and Call to Action are used. Fluid text is applied across all modules, and no font sizes are set manually in the module settings. The text automatically scales based on the screen width.
Blurb Title
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.
Accordion Title One
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.
Accordion Title Two
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.
Call To Action Title
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.
Person Name
Position
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.
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.