Mobile & Device Preview

Most of your visitors will see your site on a phone, so it's worth checking how it looks there. The editor lets you preview mobile and fine-tune each section for small screens without changing your desktop design.

Switching to mobile preview

In the editor, use the Desktop / Mobile toggle (the monitor and phone icons) in the top bar. Switch to Mobile and the canvas reframes to a phone-sized view, showing your page exactly as a visitor on a phone would see it.

Your SalonEngine layouts are responsive by default, so a section often looks good on mobile with no extra work. The mobile view is there for when you want more control.

Mobile settings are separate

This is the key idea: the settings you change in Mobile view apply to mobile only. Your desktop layout stays exactly as it was. Each section keeps an independent set of mobile settings, so you can give a section a different look on phones without compromising the desktop version.

While in Mobile view, a section's panel lets you adjust:

• Mobile layout type — use a different SalonEngine layout for this section on mobile (for example, a multi-column desktop grid that becomes a single column on phones).
• Spacing & padding — the gaps between blocks and the section's top/bottom padding.
• Column grid — how many columns the section uses on mobile.
• Section height & width — sizing tuned for the smaller screen.

Anything you don't set on mobile inherits from your desktop settings, so you only override what you need to.

Liquid scaling

For free-form layouts like Canvas, mobile offers liquid scaling — it shrinks your desktop arrangement proportionally to fit a phone, keeping your composition intact instead of rearranging it. You can set a mobile scale factor to control how much it shrinks. Turn liquid scaling off if you'd rather lay the section out manually for mobile.

The mobile menu

On phones, your navigation can collapse into a burger menu — a compact button that opens a full-screen overlay. See Navigation & Footer for how to choose and style it.

Optimizing for mobile — a quick checklist

• Preview every page in Mobile view before publishing.
• Check text size — what reads well on a wide screen can feel large or cramped on a phone. Adjust per section if needed.
• Watch tall sections — a section that's one screen tall on desktop may scroll a lot on mobile; trim padding or switch the mobile layout.
• Simplify dense grids — many columns rarely work on a narrow screen. Drop to fewer columns, or a single column, for mobile.
• Test your menu — make sure the burger menu opens cleanly and your key links are easy to reach.

Related

• Sections & Layouts — the layouts you're adapting for mobile
• Navigation & Footer — the mobile burger menu
• Stop Editing — preview the live site, then publish