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 and the page reflows on its own when it reaches a phone or tablet — 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

Whenever a block lays its elements out in a row — Direction set to Horizontal in the Layout tab — 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, so nothing gets squeezed into a sliver on a narrow screen. Turn it off only when you want the elements to stay side by side at every size — 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 and height for an element, and on the blocks that support it, a matching pair of mobile-only overrides:

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. Custom reveals a Custom Mobile Width slider.
Mobile Height — Fit, Fill, or Custom, defaulting to Fit so the element is only as tall as its content on a small screen.

These apply only at phone and tablet sizes; the regular Width and Height still govern the wide screen. Set a mobile override when an element that looks right on desktop is too wide, too tall, or too short once it reflows. Leave them at their defaults and the element simply inherits the desktop size, scaled to fit.

Not every block exposes mobile size overrides — they appear on the blocks where a separate phone size is useful, such as media and image elements. If you do not see them, the block reflows automatically from its desktop size.

Leave room under the header at the top

A full-width block at the very top of a page reaches all the way to the top of the window and can tuck under the navigation header. This is easy to miss on a wide screen and more pronounced on a phone, where the header takes up a larger share of the view.

If the first block's content sits behind the header, add top spacing to that block so its content clears the navigation. Adjust the block's padding or margin from its Settings tab — see Spacing and padding.

Preview the small screen

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

Narrow the preview pane. Shrinking the editor window narrows the preview alongside it, so you can watch a row collapse and the mobile sizes take over at phone widths.
Open the preview in its own window. From the editor you can pop the preview out into a separate browser window, then resize that window — or use your browser's own device-preview tools — 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 size overrides for a single element.

Spacing and padding

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

The block editor

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