Editing of the site's mobile version
You can edit some of your site components' displaying separately for computers and smartphones. Namely, it is possible to configure individually:
horizontal text alignment;
horizontal alignment of content in columns;
horizontal alignment of content in the collection items;
vertical paddings in blocks;
shape dividers;
text fonts;
the height of the Spacer element;
Flex block.
By default, the mobile version of the site is created and adapted automatically based on the main desktop version. But you can change one of the above-mentioned settings for an element on the site's mobile version. In that case, this setting for the particular element will be assigned separately for each device. For example, suppose you changed a text element's alignment on mobile. In that case, from now on, the alignment of this text element will be adjusted separately on the computer and mobile versions of your site (changes on the desktop version of the site will not affect the mobile version).
Note: The mobile version is the site displaying on devices with a screen width from 320 to 477 pixels. The tablet version (created automatically based on the desktop version) — is from 478 to 991 pixels. The site's desktop version has a screen width of more than 992 pixels.
Let's consider setting separate content alignments for different devices on the text element example. For instance, a particular heading is aligned to the left edge of the column:
Accordingly, the text is aligned in the same way on mobile devices (if you change the alignment on the site's computer version, the changes are applied to the mobile version as well):
To specify alignment separately for smartphones:
Go to the site's mobile version editor using the switch at the top of the screen:
Click on the required text and change its alignment:
Done! After you have changed the alignment of the text in the mobile editor, the alignment of this element will be adjusted separately for the desktop and mobile versions of your site.
Note: You can go back to the desktop version editor and see that the alignment has not changed there, because you only changed it for mobile. Even if you change the alignment of this text on the site's desktop version, these changes will no longer be applied to the mobile version as the alignment is set separately for different devices for this element.
Tip: You can learn more about working with text in this guide.
You can separately specify the horizontal alignment of elements (buttons, images, etc.) in columns. To do this, go to the mobile editor and open the column settings:
...also you can switch between settings for different devices within the column settings itself:
After that, specify a separate alignment for the mobile version:
Done! These changes will only be applied to the mobile site version. On the computer version, the alignment will not be changed. Plus, from now on, the horizontal alignment for this column will be adjusted separately for the desktop and mobile site versions.
Note: If you specify horizontal alignment in a column, by default it will be applied to text elements inside this column. However, alignment for a text element will have a higher priority than column alignment. For example, if a column's content is centered and a text element is individually left-aligned, the text will be left-aligned.
Keep in mind: The relationship between the desktop and mobile versions of the site is separate for each element and column. For example, if you change the horizontal alignment of column for the mobile view, this particular column will be horizontally aligned separately for computers and mobiles. But at the same time, the text elements inside this column have still not lost the relationship between the desktop and mobile site versions. If you change the alignment of the text on the desktop, this change will also be applied to the mobile. And only if you change the alignment of that particular text element separately for mobile, then this text element's alignment will be configured separately for smartphones and computers.
Collection items are a kind of column with a unified structure. Accordingly, if you add another item to the collection, the item will have the same structure as previous collection items. And in turn, collection items contain elements (images, buttons, text elements, etc.). You can change the alignment separately for the desktop and mobile site versions for these elements. This is done similarly to the previous section of the guide:
Open Collection settings (1) and go to the settings for the mobile (2):
Select the needed alignment, which will be applied only to the collection items in this block when displayed on smartphones:
Done! Please note that the alignment of buttons and other elements within these collection items is now done separately for each device.
Every block has bottom and top paddings. By default, our system automatically adapts them for the mobile version (makes paddings slightly smaller for display on smartphones). However, you can specify the number of pixels of paddings separately for mobile devices. To do this, go to the mobile editor (1), hover over the bottom or top of the block, hold down the left mouse button, and drag the padding up or down to resize it (2). You can also open the block settings (3) and, in the settings for mobile devices (4), specify paddings in numerical value (5) separately for smartphones:
Note: these settings also can be auto-adjusted according to the desktop version of the site.
Shape dividers allow you to make the border between two blocks more visually appealing. To adjust the divider separately for the mobile and desktop versions of your site, go to the mobile editor (1) and make changes to the block settings in this mode, or open the block settings (2) immediately and set the necessary parameters (4) for smaller screens separately in the mobile settings (3):
Note: these settings also can be auto-adjusted according to the desktop version of the site.
Using the Spacer, you can visually separate different elements inside a block. To adjust its height, you need to open the element's settings by clicking on the gear icon:
Learn how to add a spacer to your site in this article.
horizontal text alignment;
horizontal alignment of content in columns;
horizontal alignment of content in the collection items;
vertical paddings in blocks;
shape dividers;
text fonts;
the height of the Spacer element;
Flex block.
By default, the mobile version of the site is created and adapted automatically based on the main desktop version. But you can change one of the above-mentioned settings for an element on the site's mobile version. In that case, this setting for the particular element will be assigned separately for each device. For example, suppose you changed a text element's alignment on mobile. In that case, from now on, the alignment of this text element will be adjusted separately on the computer and mobile versions of your site (changes on the desktop version of the site will not affect the mobile version).
Note: The mobile version is the site displaying on devices with a screen width from 320 to 477 pixels. The tablet version (created automatically based on the desktop version) — is from 478 to 991 pixels. The site's desktop version has a screen width of more than 992 pixels.
Horizontal text alignment separately for different devices
Let's consider setting separate content alignments for different devices on the text element example. For instance, a particular heading is aligned to the left edge of the column:
Accordingly, the text is aligned in the same way on mobile devices (if you change the alignment on the site's computer version, the changes are applied to the mobile version as well):
To specify alignment separately for smartphones:
Go to the site's mobile version editor using the switch at the top of the screen:
Click on the required text and change its alignment:
Done! After you have changed the alignment of the text in the mobile editor, the alignment of this element will be adjusted separately for the desktop and mobile versions of your site.
Note: You can go back to the desktop version editor and see that the alignment has not changed there, because you only changed it for mobile. Even if you change the alignment of this text on the site's desktop version, these changes will no longer be applied to the mobile version as the alignment is set separately for different devices for this element.
Tip: You can learn more about working with text in this guide.
Horizontal alignment of elements in columns
You can separately specify the horizontal alignment of elements (buttons, images, etc.) in columns. To do this, go to the mobile editor and open the column settings:
...also you can switch between settings for different devices within the column settings itself:
After that, specify a separate alignment for the mobile version:
Done! These changes will only be applied to the mobile site version. On the computer version, the alignment will not be changed. Plus, from now on, the horizontal alignment for this column will be adjusted separately for the desktop and mobile site versions.
Note: If you specify horizontal alignment in a column, by default it will be applied to text elements inside this column. However, alignment for a text element will have a higher priority than column alignment. For example, if a column's content is centered and a text element is individually left-aligned, the text will be left-aligned.
Keep in mind: The relationship between the desktop and mobile versions of the site is separate for each element and column. For example, if you change the horizontal alignment of column for the mobile view, this particular column will be horizontally aligned separately for computers and mobiles. But at the same time, the text elements inside this column have still not lost the relationship between the desktop and mobile site versions. If you change the alignment of the text on the desktop, this change will also be applied to the mobile. And only if you change the alignment of that particular text element separately for mobile, then this text element's alignment will be configured separately for smartphones and computers.
Horizontal alignment of elements in collection items
Collection items are a kind of column with a unified structure. Accordingly, if you add another item to the collection, the item will have the same structure as previous collection items. And in turn, collection items contain elements (images, buttons, text elements, etc.). You can change the alignment separately for the desktop and mobile site versions for these elements. This is done similarly to the previous section of the guide:
Open Collection settings (1) and go to the settings for the mobile (2):
Select the needed alignment, which will be applied only to the collection items in this block when displayed on smartphones:
Done! Please note that the alignment of buttons and other elements within these collection items is now done separately for each device.
Vertical paddings in blocks
Every block has bottom and top paddings. By default, our system automatically adapts them for the mobile version (makes paddings slightly smaller for display on smartphones). However, you can specify the number of pixels of paddings separately for mobile devices. To do this, go to the mobile editor (1), hover over the bottom or top of the block, hold down the left mouse button, and drag the padding up or down to resize it (2). You can also open the block settings (3) and, in the settings for mobile devices (4), specify paddings in numerical value (5) separately for smartphones:
Note: these settings also can be auto-adjusted according to the desktop version of the site.
Shape dividers
Shape dividers allow you to make the border between two blocks more visually appealing. To adjust the divider separately for the mobile and desktop versions of your site, go to the mobile editor (1) and make changes to the block settings in this mode, or open the block settings (2) immediately and set the necessary parameters (4) for smaller screens separately in the mobile settings (3):
Note: these settings also can be auto-adjusted according to the desktop version of the site.
The height of the Spacer element
Using the Spacer, you can visually separate different elements inside a block. To adjust its height, you need to open the element's settings by clicking on the gear icon:
Learn how to add a spacer to your site in this article.
Updated on: 02/16/2024
Thank you!