Auto adjust for mobile devices based on the desktop site version
Currently, the mobile editor allows you to edit certain elements of your site separately for smaller screens. However, sometimes you may want to return to the default settings. In such cases, you can use the Auto adjust feature in the mobile editor, which will restore some settings according to their values in the desktop editor, and will restore the connection between these settings for displaying your site on different devices. After that, you can automatically affect the same setting on the mobile version by editing a setting for the desktop site version (computer). In other words, with the help of the “Auto adjust” button, you can restore the automatic adaptation of the settings for smartphones, which will be based on the desktop site version.
It may be needed when you manually configure some settings for smartphones and decide that it would be more convenient for you to edit these settings only for the desktop site version and automatically apply them to the mobile site version.
Let's take a closer look at which settings have this feature.
To synchronize the paddings of the mobile and desktop versions of your site, you just need to open the block settings in the mobile editor and click on Auto Adjust:
Note: Please note that the settings for the mobile site version will always be smaller than on the full-screen version of the site. For example, if you set the padding of a block on the desktop version to 100px, it will be 90px on the mobile version, if you set it to 150px, it will be 100px, 200px — 110px, etc.
Tip: If you don't see the "Auto adjust" button, it means that the settings are already synchronized. The "Auto adjust" button appears if you change the padding separately for the mobile site version.
To configure the shape dividers, go to the following tab in the block settings:
Note: By default, when using Auto adjust, the height of the shape divider will always be half the size on mobile devices.
When setting up font sizes for different devices in the typography settings, you can also use Auto adjust to make the font size on the mobile version calculated from its size on the desktop:
After making the changes, don't forget to publish your site so that they are displayed on your website.
It may be needed when you manually configure some settings for smartphones and decide that it would be more convenient for you to edit these settings only for the desktop site version and automatically apply them to the mobile site version.
Let's take a closer look at which settings have this feature.
Paddings
To synchronize the paddings of the mobile and desktop versions of your site, you just need to open the block settings in the mobile editor and click on Auto Adjust:
Note: Please note that the settings for the mobile site version will always be smaller than on the full-screen version of the site. For example, if you set the padding of a block on the desktop version to 100px, it will be 90px on the mobile version, if you set it to 150px, it will be 100px, 200px — 110px, etc.
Tip: If you don't see the "Auto adjust" button, it means that the settings are already synchronized. The "Auto adjust" button appears if you change the padding separately for the mobile site version.
Shape dividers
To configure the shape dividers, go to the following tab in the block settings:
Note: By default, when using Auto adjust, the height of the shape divider will always be half the size on mobile devices.
Font size
When setting up font sizes for different devices in the typography settings, you can also use Auto adjust to make the font size on the mobile version calculated from its size on the desktop:
After making the changes, don't forget to publish your site so that they are displayed on your website.
Updated on: 12/05/2023
Thank you!