Mobile view of the site
One of Weblium's assets is an adaptive mobile version of all blocks and elements, created specifically for smaller screens. It allows you to compress the content and layout you see on the desktop into an easy-to-scroll, readable mobile version.
This article will help you understand the logic of this adaptation.
The paddings and fonts on mobile adjust automatically, and the bigger the padding is on the desktop, the bigger it will be on smaller screens. Paddings up to 90px don't change on mobiles and tablets, but bigger paddings adjust proportionally.
Same with the fonts: for titles and headings the size of the fonts remains proportional on smaller screens.
Header is a top block on a site that is typically used for building navigation. More information about this block you can find in the Header settings article.
All header components in the mobile version of the site are moved to the so-called burger menu. Since large navigation menus can take up too much space on a mobile phone or be too small to read or click on the desired link, all content (buttons, navigation menus, social media icons) is hidden in the burger menu until the user expands it.
For example, here's how the header looks on the desktop:
And here's how it will look on the mobile devices:
By pressing the menu button, the visitors will see all hidden components:
Note: The background of the burger menu is the color of a headers' background. Even if the header is transparent, the burger menu will take the previously specified color.
All the blocks with multiple items — collection, list, gallery — will appear vertically on mobile devices. The position of these items on mobile is defined by their position on the desktop — we keep the left-to-right order, just transform it into a vertical layout.
For example, here's how the collection block looks on PC:
And here's how it looks on mobile:
Note: Empty columns and collections don't display on smaller screens.
Each row in the table transforms into a separate card. The columns in the table's header will be placed on the right, and their content, respectively, on the left.
This is the desktop view of the table:
And here's how this row will look on mobile:
Tip: Check the Adding a table article to see how you can set and manage the table on your site.
If you don't want to show a particular block on smaller screens, follow the instructions in the Hiding a block on smaller screens article.
This article will help you understand the logic of this adaptation.
Paddings and fonts on mobile
The paddings and fonts on mobile adjust automatically, and the bigger the padding is on the desktop, the bigger it will be on smaller screens. Paddings up to 90px don't change on mobiles and tablets, but bigger paddings adjust proportionally.
Same with the fonts: for titles and headings the size of the fonts remains proportional on smaller screens.
Mobile view of the header
Header is a top block on a site that is typically used for building navigation. More information about this block you can find in the Header settings article.
All header components in the mobile version of the site are moved to the so-called burger menu. Since large navigation menus can take up too much space on a mobile phone or be too small to read or click on the desired link, all content (buttons, navigation menus, social media icons) is hidden in the burger menu until the user expands it.
For example, here's how the header looks on the desktop:
And here's how it will look on the mobile devices:
By pressing the menu button, the visitors will see all hidden components:
Note: The background of the burger menu is the color of a headers' background. Even if the header is transparent, the burger menu will take the previously specified color.
Mobile view of the blocks with multiple items
All the blocks with multiple items — collection, list, gallery — will appear vertically on mobile devices. The position of these items on mobile is defined by their position on the desktop — we keep the left-to-right order, just transform it into a vertical layout.
For example, here's how the collection block looks on PC:
And here's how it looks on mobile:
Note: Empty columns and collections don't display on smaller screens.
Mobile view of the table
Each row in the table transforms into a separate card. The columns in the table's header will be placed on the right, and their content, respectively, on the left.
This is the desktop view of the table:
And here's how this row will look on mobile:
Tip: Check the Adding a table article to see how you can set and manage the table on your site.
If you don't want to show a particular block on smaller screens, follow the instructions in the Hiding a block on smaller screens article.
Updated on: 12/05/2023
Thank you!