Responsive Headings

19/02/2020

Avada includes several Responsive 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 Typography Sensitivity – Set to 0 to disable responsive typography. Increase the value for a greater effect.
  • Minimum Font Size Factor – Determines the minimum font-size of elements affected by responsive typography using a multiplying value.

Manage Responsive Options Globally In Theme Options

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

Step 1 – Adjust the Responsive Typography Sensitivity by dragging the slider to fit your needs. 0 will disable responsive typography, and 1 is maximum responsiveness.

Step 2 – Adjust the Minimum Font Size Factor by dragging the slider left or right to control the multiplying value of the minimum font size. For example, if set to 0, then there is no minimum font-size. If set to 1 then the minimum font-size will be the same as the font-size of the element. If set to 2 then the minimum font-size will be double the initial font-size of the element.

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

Responsive Typography Options

Manage Responsive Type For Fusion Sliders

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.

Responsive Fusion Slider Options

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 the theme options and ensure the values are correct. Responsive Typography Sensitivity will increase the amount of resizing. 0 will disable responsive typography, while 1 is maximum responsiveness. Minimum Font Size Factor is used to determine the multiplying factor for the minimum font size.