Test Page Layout At Different Device Widths In The Web Editor

This guide explains how to use the breakpoint switcher inside the Admin Web Editor.

Use it when you want to:

• check how the page looks at different screen widths
• compare mobile, tablet, and desktop-style layouts
• catch layout problems before publishing
• control which breakpoint buttons appear in the builder toolbar

Before You Start

Open the Web Editor from System > Platform Customization.

Then open the page you want to review in the builder workspace.

What The Breakpoint Switcher Does

The breakpoint switcher changes the canvas width inside the builder so you can review the page at different device-style sizes.

Use it when you want to see whether the page still looks correct on:

• smaller mobile-style widths
• tablet-style widths
• wider desktop-style widths

This helps you catch layout issues earlier, without leaving the editor.

Use The Quick Breakpoint Buttons

The builder can show quick device-style buttons for common page widths.

Use these buttons when you want to switch the canvas quickly between common viewing sizes.

Depending on your setup, these buttons can represent:

• mobile
• tablet
• desktop

When you choose one of these widths, the canvas updates to that size so you can review spacing, stacking, and section flow more accurately.

Use The More Options Menu

The breakpoint area can also include a more menu.

Use this menu when you want to manage which optional breakpoint buttons appear directly in the toolbar.

This is helpful when:

• you prefer a simpler toolbar
• you only need a few widths most of the time
• you want to turn extra breakpoint buttons on or off

Understand Active Breakpoint States

When a breakpoint is currently selected, OpenMirai highlights that option as the active width.

This helps you confirm which canvas size you are reviewing before making design decisions.

If the page looks wrong at one width, switch to another breakpoint and compare the layout before editing.

Understand Disabled Breakpoint Options

Some breakpoint options can appear disabled in certain situations.

When that happens, the disabled option cannot be selected until the builder allows that width again.

This can happen when:

• a minimum width rule applies
• the current setup limits one of the smaller widths
• the toolbar only allows certain options in the current state

Use Tooltips To Check Device Sizes

Breakpoint buttons can also show tooltips.

Use these tooltips when you want to confirm what each device icon represents before switching.

This is especially helpful if several device icons look similar at a glance.

When To Use The Breakpoint Switcher

The breakpoint switcher is most useful:

• after adding new blocks
• after changing section spacing or layout
• after updating theme or styling
• before publishing a page with complex responsive sections

What To Do Next

• switch between mobile, tablet, and desktop-style widths while reviewing the page
• fix layout issues in the canvas after finding them at a specific width
• use preview mode after major responsive changes
• save the page once the layout looks correct across the widths you tested