Responsive Headings

10/20/2016
IMPORTANT NOTE – This feature is only available in Avada 3.8 or higher.

As of Avada 3.8, we included new Responsive Heading Typography options. These are global options that can be set in the Theme Options > Responsive section. Responsive Typography options have also been built into the Fusion Slider. Continue reading below to learn more about each option and how to set them up.

  • Responsive Heading Typography – Turn on for headings to change font size responsively.
  • Responsive Typography Sensitivity – Values below 1 decrease resizing, values above 1 increase sizing, in pixels.
  • Minimum Font Size Factor – Minimum font factor is used to determine the minimum distance between headings and body font by a multiplying value, in pixels.

How To Manage Responsive Options Globally In Theme Options

Located here -> Theme Options > Responsive > Responsive Heading Typography

Step 1 – Switch the Responsive Heading Typography option to ‘On’ to enable and to display the ‘Responsive Typography Sensitivity’ and ‘Minimum Font Size Factor’ options.

Step 2 – Adjust the Responsive Typography Sensitivity by dragging the slider left to a value below 1 to decrease resizing and right to a value above 1 to increase resizing. and Minimum Font Size Factor settings to fit your needs.

Step 3 – Adjust the Minimum Font Size Factor by dragging the slider left or right to determine the minimum distance between headings and body font by a multiplying value, in pixels.

Step 4 – Click the ‘Save Changes’ to save your settings.


How To Manage Responsive Type For A Fusion Slider

Aside from the Fusion Theme Options, you can also set the Responsive Type options in each Fusion Slider.

IMPORTANT NOTE
The Fusion Slider responsive typography settings are independent of the Theme Option settings and only apply to the individual Fusion Slider.

Located here -> Fusion Slider > Add/Edit Sliders

Step 1 – Select an existing slider or create a new one. At the bottom of the settings you will see the Responsive Typography Sensitivity options.

Step 2 – Enter the Responsive Typography Sensitivity and Mininum Font Size Factor settings to suit your needs.

Step 3 – Click the ‘Update’ to save your settings.


Common Issues & Questions

1. My headings are too big for mobile and are being cut off

This means that your responsive settings are probably not set correctly. Please check the Responsive Typography Sensitivity and Minimum Font Size Factor settings in theme options and ensure the values are correct. Responsive Typography Sensitivity will increase or decrease the amount of resizing. Values below 1 decrease resizing, and values above 1 increase resizing, in pixels. Minimum Font Size Factor is used to determine the minimum distance between headings and body type by a multiplying value, in pixels.

11 Likes
Proudly Serving Over 400000 Satisfied Users!