All Collections
Website editor
Design
How to Edit the Mobile View of a Website
How to Edit the Mobile View of a Website

You can edit mobile and desktop versions separately to make sure your website looks its best

Updated over a week ago

You can switch between views by clicking on the mobile or desktop icons in the upper toolbar:

By default, website elements are displayed on the mobile view in the order they've been added to the desktop view. Even if you, later on, reorder elements on the desktop view, these changes are not automatically applied to the mobile view. You can sort the elements on the mobile view manually. This way, you can lay out elements differently on desktop and mobile views.

NOTE

  • If you delete an element or a section on the desktop view, it's also automatically removed from the mobile view and vice versa

Auto-fix Layout

After making any changes to the desktop version, the option Auto-fix layout appears in the corresponding section on the mobile version:

The "Auto-fix layout" tool in the Zyro builder

Once you click on the button, the mobile layout is forced to follow specific positioning rules based on the desktop layout.

The mobile auto-positioning is automatically turned off once you make any manual edits on the mobile version.

Sort elements

To reorder elements, enter the mobile view and simply drag-and-drop them:

Resize elements

To resize elements, enter the mobile view and use the resizing handles on the element border:

Resize text

You can resize the text in two ways:

  • Globally – affects all texts of a particular style (e.g., all texts written in Heading 1) all across your website on the mobile view

  • Locally – affects a particular text element on the mobile view

NOTE: For desktop and mobile views, you can only set the different text sizes and line heights. It means that if you choose a different font family on mobile, it will also change in the desktop view. The same happens if you change the whole text style: for example, if you set Heading 2 for mobile while it's Heading 1 on desktop, the text element in the desktop view will change to Heading 2, too.

Resize text globally on mobile, enter the mobile view and change the font size of a particular text style in the global text style settings:

To resize text locally on mobile, enter the mobile view, click on a particular text element and change its font size:

Change the menu position

To change the position of the burger menu, enter the mobile view and open the header settings:

Then, in the Layout tab, change the menu position (alignment):

Change the logo position

To change the logo position, enter the mobile view and click on Change logo (or open the general header settings → Logo tab):

Then, change the logo position (alignment):

Did this answer your question?