Mobile view of the site
One of Devellp'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.
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 article Header settings.
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 article Adding a table 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 article Hiding a block on smaller screens.
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 article Header settings.
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 article Adding a table 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 article Hiding a block on smaller screens.
Updated on: 04/13/2023
Thank you!