Designing for mobile

How blocks reflow on phones and tablets, the mobile-only controls, and how to preview small screens.

A page you build in Basker is one layout that adapts to every screen. Most of the time, you design for a wide screen. The page then reflows on its own at phone and tablet sizes. Text wraps, images shrink, and rows that ran side by side stack into a single column. A few controls let you tune what happens on the small screen without building a separate mobile version.

Rows stack on small screens

A block can arrange its elements in a row. Set Direction to Horizontal in the Layout tab. When you do, a Vertical on Mobile toggle appears alongside it.

Vertical on Mobile is on by default. With it on, a horizontal row collapses into a vertical stack on phones and tablets. Nothing then shrinks into a thin sliver on a narrow screen. Turn it off only when you want the elements to stay side by side at every size. This suits short paired items, such as an icon next to a label.

The toggle appears only while Direction is Horizontal. A block that is already vertical has nothing to collapse, so it shows no mobile toggle.

Mobile size overrides

The Size tab carries the width for an element. On the blocks that support it, this tab also includes a Mobile Width override.

Mobile Width: Fit, Fill, or Custom, the same choices as the desktop Width. It defaults to Fill, so an element spans the available width on a phone unless you narrow it. Select Custom to reveal the Custom Mobile Width slider.

This applies only at phone and tablet sizes. The regular Width still governs the wide screen. At the mobile default, the element fills the available width. Change it when you need a different small-screen width.

Not every block exposes a mobile size override. It appears on blocks where a separate phone width is useful, such as the Media block. If you do not see it, the block reflows automatically from its desktop size.

Leave room under an overlay header

When the Header Mode for the site is Overlay, the header floats over the first page block. This can be more noticeable on a phone, where the header occupies a larger share of the view. A Static header keeps its own space and does not need this allowance.

If the content in the first block sits behind an Overlay header, add top padding so it clears the navigation. Alternatively, switch the header to Static. See Header and Spacing and padding.

Preview the small screen

The live preview in the editor is the fastest way to check mobile. As you edit, watch the preview pane redraw with your draft content.

Narrow the preview pane. Shrink the editor window to narrow the preview alongside it. Then watch a row collapse and the mobile sizes apply at phone widths.
Open the preview in its own window. Open it in a separate browser window and resize it. You can also use the device-preview tools in your browser to see the page at exact phone and tablet widths.

For the full set of editor controls and how live preview works, see The block editor.

Where to go next

Layout controls

Direction, alignment, position, and gap, including where the Vertical on Mobile toggle lives.

Size

Width, height, and the mobile width override for a single element.

Spacing and padding

Set the margin, padding, and width of a block to keep content clear of the header.

The block editor

Add and edit blocks with the live preview you use to check small screens.