Responsive editing for tablets and mobile

WoodMart blocks provide responsive controls for adapting page content to desktop, tablet, and mobile screens. You can preview each device mode in the editor and assign device-specific values to supported settings.

Responsive breakpoints

WoodMart uses the following viewport ranges for its Gutenberg block settings:

Desktop: 1025px and wider.
Tablet: from 769px to 1024px.
Mobile: up to 768.98px.

Preview the page on different devices

Open the page in the Gutenberg editor.

A page opened in the WordPress Gutenberg editor — Open the page that you want to edit.

Use the device preview control in the top editor toolbar to switch between Desktop, Tablet, and Mobile. The preview changes the editor canvas width and also determines which responsive value you are editing in WoodMart controls.

Desktop, tablet, and mobile preview controls in the Gutenberg toolbar — Select a device preview from the top toolbar.

Edit a responsive setting

Controls that support device-specific values display a device icon. Select the required device from that control or switch the main editor preview, then enter the value for that device.

Device selector beside a responsive WoodMart block setting — Responsive controls provide a device selector.

Example: responsive title typography

Step 1. Select the Title block that you want to adjust.

Title block selected in the Gutenberg editor — Select the Title block.

Step 2. Open the Style tab in the block settings sidebar.

Style tab in the WoodMart Title block settings — Open the Style tab.

Step 3. Open the Typography settings.

Typography settings button for the WoodMart Title block — Open the Typography controls.

Step 4. Find Font size, open its device selector, and choose Mobile.

Mobile selected for the responsive Title font size setting — Switch the Font size control to Mobile.

Step 5. Enter the required mobile font size and preview the result. The desktop and tablet values remain available independently.

Custom mobile font size applied to a WoodMart Title block — Set and preview the mobile font size.

Responsive Row and Column layouts

Each Column can use a different percentage width on desktop, tablet, and mobile. If the combined widths exceed 100%, the columns wrap onto another line. For example, six desktop columns can become three columns per row on tablet and two columns per row on mobile.

Set responsive Column widths to change how the Row wraps.

Responsive Container layouts

Container controls such as Direction, Justify content, Align items, Wrap, Column gap, and Row gap are responsive. For example, set Direction to Row on desktop and Column on tablet or mobile to stack the same children vertically on smaller screens.

Responsive Flexbox controls for the WoodMart Container block — Configure the Container layout separately for each device.

How responsive values are inherited

Responsive values cascade from wider to narrower devices. Tablet inherits the desktop value when no tablet value is set, and mobile inherits the tablet value or, if that is empty, the desktop value. A value entered specifically for mobile does not change tablet or desktop.