Responsive Headings

Last Update: March 4, 2024

Avada includes several Responsive Typography options. These are global options that can be set in the Avada > Options > Responsive section. Responsive Typography options have also been built into the Avada Slider. Continue reading below to learn more about each option and how to set them up.

Manage Responsive Options In Global Options

Located here -> Options > Responsive

  • 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.

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 – The minimum font size is the value of the body font multiplied by the value set in the Minimum Font Size Factor area. Adjust the value 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 set for the body. If set to 2 then the minimum font-size will be double the font-size set for the body

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

Manage Responsive Type For Avada Sliders

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

Located here -> Avada 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.

Avada Slider > Responsive 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.