Mobile & Responsive Preview

Storra themes are responsive by default — they adapt to whatever screen size the visitor's device has. The visual editor's device picker in the toolbar lets you preview your storefront at different breakpoints without leaving the editor.

The device picker

Three modes in the toolbar:

• Desktop — full editor width. Default.
• Tablet — narrows the preview iframe to a tablet-sized viewport.
• Mobile — narrows to a phone-sized viewport.

Switching devices only resizes the preview iframe — your saved theme is unchanged. The same draft state is rendered at each viewport, exactly the way it would render on a real device of that size.

Why bother previewing mobile

The majority of storefront traffic comes from mobile. A page that looks great on a 1440px desktop monitor can be cramped, broken, or unreadable on a 360px phone. Common things to check:

• Hero images — does the focal point still show on a tall, narrow viewport?
• Heading sizes — does your "Welcome to..." headline wrap awkwardly?
• Package grids — does the grid collapse to a single column? Do prices fit on the card?
• Buttons — are tap targets big enough for fingers?
• Forms (cart / contact) — do inputs reach the edge of the screen?

Per-section responsive settings

Some sections expose responsive overrides in their inspector — for example, a "Featured Packages" section might have a Mobile columns setting separate from Desktop columns. These let you tune layout per-breakpoint without writing CSS.

If a section doesn't expose responsive settings, the theme's default responsive behavior is what you get. Most themes (including Fuji) collapse multi-column layouts to a single column on mobile and resize fonts using the heading and body scale settings in Typography & theme settings.

FAQ

The mobile preview looks fine, but the real device looks broken.

The preview is accurate to the breakpoint, but it doesn't simulate every quirk of a real browser — touch gestures, viewport resizing during scroll, or device-specific quirks (iOS Safari address bar, Android keyboard) can surface issues the preview misses. Test on a real phone before launching, and use your browser's responsive mode (DevTools → Toggle device toolbar) for a closer simulation.

Can I customize where the breakpoints are?

Not in the visual editor. Breakpoints are a theme-level concern — to change them, edit the theme CSS in the code editor.

Should I always design mobile-first?

Up to you. Most successful Storra stores are designed for mobile first (since that's where most customers are) and then scaled up to desktop. The editor doesn't enforce a workflow — you can edit at any viewport and switch back and forth.