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
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.
The Avada Slider responsive typography settings are independent of the Global Option settings and only apply to the individual 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.
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.
