Once you have added and configured standard blocks, you can additionally edit their mobile version. To do this, click the mobile device icon in the center of the page editor panel.

In the dropdown menu, select the required screen size. If you need to check how the page looks on a specific device, select it or the closest option in the Devices section.

The editor will switch to mobile mode, making it easier to edit blocks.

In preview mode, click the mobile device icon and select the required screen size.

To hide the editor interface, click the arrows icon in the lower left corner or next to Back to editing.

To change the preview scale, click the 100% icon and select the value you need from the dropdown menu.

Click the pencil icon to return to the editor and make changes to blocks.

Each block has separate padding and typography settings for the mobile version. Depending on the block, additional settings for individual elements on mobile devices may also be available. These settings are usually marked with hints in the settings panel.

For example, a menu block may have a separate settings tab for this.

In cover blocks, mobile version settings may be marked with a phone icon.

Changing font size and line spacing for mobile devices. In the block settings, open the Typography section, click the desktop icon, and enter the font size for the mobile version in the field with the mobile device icon.

Line spacing is configured the same way.

Changing the image corner radius and padding for covers on mobile devices. You can set a separate corner radius or padding value for mobile devices in blocks from the categories of Cover and Image.

To change the radius or padding, click Settings and find the required field. Then click the desktop icon next to the field and enter the value for the mobile version.

Changing background image position. In cover blocks and other blocks where this setting is available, you can select the part of the image that will be displayed in the block.

To set automatic position, select the suitable value from the dropdown menu, for example, Center Center.

To set position manually, click the icon next to the field.

The image with positioning points will open. You can select one of the ready-to-use points or put your own point where needed.

Positioning helps adjust how the background image is displayed for the mobile version so that the same image looks good on different screens.

In any block, open the settings, click the icon next to the Top padding or Bottom padding fields, and enter the value for the mobile device.

If you need different blocks to be displayed on smartphones and desktop computers, set up the visibility range.

Open the block settings and scroll down to the Block visibility on devices option. Specify which devices the block should be displayed on. Then save the settings and republish the page.

You can configure block responsiveness for different devices by converting the block to Zero Block using the option in the block settings. This option is currently available in most blocks.

After conversion, you will be able to manually configure the block's appearance in five screen width ranges or add your own ranges. Learn more about setting up responsive design in Zero Block in the Zero Block: How to Create a Custom Block and Zero Block: Responsive Design articles.

If you disable responsiveness, the page for mobile devices will look the same as for desktop.

To disable the responsive version, go to Page settings → Additional, select the Disable mobile view checkbox, and republish the page.