Responsive editing for mobile and tablets

When creating a website, it’s essential to consider that visitors may view it on a variety of devices, including PCs, tablets, or smartphones. To ensure a seamless experience, your site should be optimized for all screen sizes. At the very least, it should be functional on PCs, tablets, and mobiles.

Web browsers determine device type based on the visible screen size, or viewport. Gutenberg default settings classify devices with a viewport width greater than 1024px as PCs, those between 1024px and 767px as tablets, and devices smaller than 767px as mobiles. The specific width at which the design adjusts—such as 767px—is referred to as a “breakpoint”. Since a single design may not suit all devices, Gutenberg allows you to tailor your layout for different screen sizes.

View your site on different devices

To ensure your site is responsive, it’s essential to preview its appearance across various screen sizes. The Gutenberg Editor offers an efficient tool for testing your site on multiple devices and screen resolutions.

Here’s how you can check your site’s layout on different screen widths:

• Open the page in the Gutenberg Editor.

• On the right side of the top toolbar, select the icon corresponding to the screen size you want to preview. By default, there are three options: one for desktop view, another for tablet view, and a third for mobile view.

Edit for different devices

The Gutenberg Editor enables you to adjust various block settings for specific devices. Settings that support device-specific customization are indicated with a device icon. To adjust settings for a particular device, click the device icon next to the option name and choose the desired device from the dropdown menu:

Example: Editing a Block for a Specific Device

In this example, we’ll adjust the typography of a title so that it displays differently on desktops and mobile devices.

Steps:

• Open or create a page containing a Title block to get started.
• Select the Title block.

• In the right panel, click the Style tab. 

• In the Typography setting, click the pencil icon.

• In the panel find Font size option, click on device icon and choose mobile icon in dropdown.

• Enter the font size you want to see for this Title block on your mobile device.

Row and Columns responsive options

The responsive positioning of columns within a row follows the following rules: by default, on desktop (viewport 1025 pixels and above), all columns are placed in one row regardless of their quantity. Starting from a viewport of 1024 pixels and below, columns can be moved to a new row by setting the total width of all columns in percentages greater than the width of the row. For example, if there were 6 columns in 1 row on a desktop, they can be configured to 3 columns in 2 rows on a tablet and 2 columns in 3 rows on a mobile. 

Container responsive options

The Container block is a flexible tool for organizing content using CSS Flexbox layout principles. It enables the creation of more advanced layouts and optimized page structures. With features like Direction, Justify Content, Align Items, Wrap, and Column & Row Gaps, the Container provides precise control over the positioning of inner content.

Each of these settings is fully responsive, allowing you to customize layouts across three breakpoints independently. For instance, you can align two buttons side-by-side on desktops by setting the Direction to Row, and stack them vertically on tablets and mobiles by switching the Direction to Column.