How to Optimize a Website for Viewing on Mobile Devices
Set up the view of the page on various devices
Tilda automatically adjusts the website for viewing on tablets, smartphones, netbooks, laptops, and computers.
Additionally, you can change the paddings' sizes between blocks for mobile devices, adjust the block visibility on different devices, build your own adaptive version using Zero Block editor, or switch off the website's adaptivity.
How to create different block versions for computer and mobile devices
How to change the paddings' values for mobile devices
How to change the font size, line spacing, as well as images' border radius and outer paddings for covers for mobile devices
How to edit the mobile version and view the changes at once
How to create your own website version for mobile devices using Zero Block editor
How to switch off the website adaptivity for different screens
Block visibility on devices
This setting determines which blocks can or cannot be shown on certain types of devices. You can adjust this feature in the settings of any block.
Why you may need it and how it works
If a block looks good on desktop but not as good on mobile, you may want to set the block visibility to 980px or more. This way, the block will become desktop-oriented and will not appear on mobile devices.
Then you need to copy this block and optimize it for viewing on mobile by adjusting its settings (such as changing the image, font size, etc.). Set the block visibility to "0-980px." You will get a mobile version of the block.
So those who access your website from a PC will see the desktop version and mobile users the mobile version.
The block visibility (different values of parameters) is useful so that you can adjust the block's look for a specific device by selecting the resolution, if you need. For example, if some blocks do not look good on tablets or on specific mobile phones.
If a block looks good on desktop but not as good on mobile, you may want to set the block visibility to 980px or more. This way, the block will become desktop-oriented and will not appear on mobile devices.
Then you need to copy this block and optimize it for viewing on mobile by adjusting its settings (such as changing the image, font size, etc.). Set the block visibility to "0-980px." You will get a mobile version of the block.
So those who access your website from a PC will see the desktop version and mobile users the mobile version.
The block visibility (different values of parameters) is useful so that you can adjust the block's look for a specific device by selecting the resolution, if you need. For example, if some blocks do not look good on tablets or on specific mobile phones.
There is no need to change the block visibility setting for all blocks. You can adjust it for those blocks where a photo is not cropped well, or if the selected block is not suitable for the mobile version.
Example
We have a cover that looks great on desktop, the text aligned to the left and the main object to the right. Now, let's adjust it so that it looks good on mobile devices, too.
As we see, the photo gets cropped on a mobile phone and does not look very good.
Set the block visibility to "> 980px." Now, mobile users will not see it anymore.
Copy the block.
Adjust the block for the mobile version—change the alignment of the photo and text.
Let's set this block's visibility to "≤ 980px," it will not appear on devices with screens wider than 980px.
Done! Now the cover is displayed differently on various devices depending on the screen width.
Examples of screen width for various devices:
iPhone5: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
Setting the paddings for mobile devices
In any block, open the settings, click on the icon beside the "Top padding" and "Bottom padding" option and set the spacing for the mobile device.
Additional settings for mobile devices
In any block, you can also change the font size and line spacing for mobile devices, and you can set rounded corners for images separately.
Changing font size and line spacing for mobile devices
To do this, click on the "Settings" button of the block and find the "Typography" tab. In this tab, click on the computer icon beside the field. Then a field will appear where you can specify the font size for the mobile version.
The same order of actions is applied to change the line spacing.
The same order of actions is applied to change the line spacing.
Changing the image border radius and cover padding for mobile devices
You can set your own value of border radius or outer padding for covers specifically for mobile devices in all blocks of the "Cover" and "Image" categories.
To change the radius or padding, click on the "Settings" button and find the corresponding field. Click on the computer icon beside the field and type the new value in the new field.
To change the radius or padding, click on the "Settings" button and find the corresponding field. Click on the computer icon beside the field and type the new value in the new field.
Viewing the mobile version of blocks in the editor
This feature is only available in testing mode. To access it, select the "Opt-in to become a beta-tester and try new features before they are released" checkbox in your Profile.
To edit the mobile version of a block, switch the display in the editor to the mobile version. To do this, click on the phone icon in the menu at the top and select the desired device orientation or its size.
By default, 4 screen sizes are available: 360px and 480px for a smartphone, 640px and 960px for a tablet.
To select a different mobile device size, click on "Devices" in the list. In the submenu, select the device you need. All updated mobile devices and tablets have already been added to the list.
Once you have switched the block display mode in the editor, click on the "Settings" button of the block. Now you can configure the mobile version and the changes will be displayed in the preview at once.
Setting up adaptivity in Zero Block
You can adjust the block's adaptivity for various devices by converting it to Zero Block using an option in the block's settings. This option is available in most blocks at the moment.
Once the block is converted, you can manually adjust its look for five versions of screen widths. You can read more about setting up adaptivity in Zero Block in the "Zero Block: How to Create a Custom Block" and "Zero Block: Responsive Design" articles.
Switching off page adaptivity
If you switch off adaptivity, the page will look on mobile devices just like on a computer. To do this, select the Disable mobile view checkbox in Page Settings → Additional and republish the page.
The website version adapted for mobile devices is on the left, the website with adaptivity switched off is on the right.
