Responsive Editing

What looks great on a large desktop screen usually needs some refinement for smaller devices. This typically involves applying smaller font sizes, margins, paddings, column width/stacking, or hiding certain elements on smaller devices.

Bricks lets you adjust styles for the following four responsive breakpoints:

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

Once you’ve finished editing your site for desktop, make sure to view your site with all three responsive editing modes to optimize your layout for smaller screens.

Click one of the device icons in the center of the builder toolbar to switch the editing mode or via the CMD/CTRL + B keyboard shortcut.

Responsive Editing
Responsive Editing: Available in 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.