Mobile Editing With Breakpoints

What looks great on a large desktop screen usually needs some refinement for smaller devices. Typically this involves applying smaller font sizes, margin, padding, or hiding certain elements on mobile devices.

Bricks offers the following four editing modes:

  • Desktop: This is the base breakpoint. Settings apply to all screen sizes by default. Switch to one of the three mobile editing modes below to overwrite settings for smaller screens:
  • Tablet Portrait: Settings apply to all screen sizes <= 991px.
  • Mobile Landscape: Settings apply to all screen sizes <= 767px.
  • Mobile Portrait: Settings apply to all screen sizes <= 478px.

So once you’ve finished editing your site for desktop, make sure to inspect your site with all three mobile editing views to optimize the viewing experience for smaller screens.

Click one of the device icons in the center of the builder toolbar to switch the editing mode.

Mobile Editing: Available from the builder toolbar.

The screenshot above shows how the Mobile portrait editing mode looks like. Notice the highlighted smartphone (portrait) icon.

You can specify a custom width by using the number field next to the device icons in the builder toolbar. The device-width in the screenshot above is set to 478px.