All Collections
Website builder
Design
Website Builder: How to Edit the Mobile Version of a Website
Website Builder: How to Edit the Mobile Version of a Website
Hostinger Website Builder allows editing mobile and desktop versions separately to make sure your website looks its best
Updated over a week ago

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

To achieve the best result, avoid moving elements between sections, or remember to check both versions after doing so. It affects both mobile and desktop versions and thus may distort your website's layout. Instead, feel free to reposition elements within a section 💡

Access the Mobile Editor

Switch between the views by clicking on the mobile or desktop icon in the upper toolbar:

Changing the menu position in Hostinger Website Builder

Sort Elements

To reposition elements, enter the mobile view, and simply drag and drop elements:

Sorting elements in Hostinger Website Builder

Resize Elements

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

Resizing elements in Hostinger Website Builder

Resize Text

You can resize 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

To 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:

Changing text size globally in Hostinger Website Builder

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

Changing text size locally in Hostinger Website Builder

You can set the following settings to be different on desktop and mobile:

  • Font size; e.g., desktop: 20 PX, mobile: 18 PX

  • Text alignment; e.g., desktop: left, mobile: center

  • Line height; e.g., desktop: 2, mobile: 1.5

It means that once you change any other parameter – font family, bold, italic, underline, etc. – the change will reflect on both desktop and mobile. The same happens if you change the whole text style, e.g., 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.

You may duplicate an element or section, and make one version visible on desktop and another one visible on mobile. This way, you get more freedom when styling the content on desktop and mobile individually, as, normally, some settings (e.g., text style) apply to both desktop and mobile. Learn more: How to Hide Elements and Sections

Change the Menu Position

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

Opening the header settings in Hostinger Website Builder

In the Layout tab, change the menu position:

Changing the website's logo position in Hostinger Website Builder

If you can't see the header section, it's likely that all your website pages are hidden from the navigation menu 💡

Change the Logo Position

To change the logo position, enter the mobile view, click on the header section, and select Change logo:

Opening the logo settings in Hostinger Website Builder

In the Logo tab, change the logo position:

Changing the website's menu position in Hostinger Website Builder

If you can't see the header section, it's likely that all your website pages are hidden from the navigation menu 💡

Did this answer your question?