Design your pages for mobile

To begin designing your pages for mobile, access the mobile preview mode. Switch your current preview mode within the page builder by clicking 'Mobile' in the Preview Mode dropdown.

🔑 Quickly switch between preview modes by using the hotkeys 'M' (for Mobile) and 'D' (for Desktop).

Understanding mobile style overrides

With mobile styling, you can choose to make mobile style overrides. Mobile style overrides are design changes that are only visible on a mobile device. 

Visibility
You can choose to make a component visible or invisible in mobile view. You can also hide components on desktop.

Component style
You can edit the following component styles to only be different within mobile view:

  • Width
  • Background
  • Inner Spacing
  • Outer Spacing
  • Alignment
  • Border
  • Corners
  • Shadows
  • Opacity

⚠️ Important: Conversely, you cannot edit the following styles to only be different within mobile view. Any edits you make on the following will automatically change on desktop and mobile view:

  • Adding text
  • Adding content
  • Changing theme colors
  • Text styling (bold, italic, size, etc.)

Adding mobile style overrides

Any edits you make while in mobile preview mode add mobile style overrides. If an element has a mobile override, a red "x" icon will appear in the Right Pane next to the style.

You can make entire sections visible or invisible in mobile view by toggling the visibility icons.

⚠️ Note: Rearranging components can only be done in desktop mode. Any changes you make with your page layout in desktop will reflect on mobile by default.

Removing mobile style overrides

Click the mobile style override icon to remove it. Removing the mobile style overrides reverts the component styles to match the desktop design.

Did this answer your question?