Mobile View of the Site

Mobile View of the Site


One of SiteCliq'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. 


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 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.

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 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.



    • Related Articles

    • Changing the Tab Color on Mobile Chrome

      Mobile traffic is growing rapidly. To stand out from other sites viewed on mobiles, you can change the tab color of your website in Chrome. This is how it looks on the mobile version: Important: this option only works with a light browser theme. ...

    • Unpublishing Your Site

      Once you publish your site, it instantly becomes available via a direct link. We don't offer the possibility to completely unpublish the site, but there are a few workarounds you can use in case you'd like to restrict access to the website. Options ...

    • Creating a Multilingual Site

      In case you serve the international audience, creating a multilingual site can help you improve your brand image and prove a customer-centric mindset of your business. More languages available on your website will attract more potential clients as ...

    • Changing Site's Font

      Once you pick a template, it will come with a pre-defined site font which you can change to your liking. SiteCliq allows you to change a font family for the whole website or set a specific font for various typography (e.g. headings, titles, etc.). ...

    • Changing the Burger menu Color

      All sites on SiteCliq are automatically adapted to different screen sizes. The editor creates a mobile version automatically based on all the blocks and elements you've added to the site. Since navigation menus in the header can take up too much ...