Edit the mobile version

WordPress sites use responsive design—there’s no separate mobile version to edit. In this guide, you’ll learn how to customize how your content appears on mobile devices using block settings and CSS.

The Navigation block includes settings for the mobile menu button (known as a “hamburger” icon). To customize your menu on mobile:

1. Navigate to Appearance → Editor from your site’s dashboard.
2. Select the template or template part containing your navigation menu.
3. Open List View and select the Navigation block.
4. In the block settings sidebar, click the settings icon (gear icon).

5. In the Display section:
   • Toggle “Show icon button” to use a hamburger icon or show “Menu” text.
   • Choose your icon style (two or three lines) and select when the hamburger icon appears using the Overlay Menu settings.

Learn more about styling your site’s menus.

Some layout blocks let you control whether content stacks vertically on mobile screens. By default, WordPress automatically stacks side-by-side content on smaller screens to keep it readable.

To adjust the stacking behavior, follow these steps:

1. Navigate to Appearance → Editor from your site’s dashboard.
2. Edit the page or template containing the block you want to adjust.
3. Open List View and select the block.
4. In the block settings, toggle “Stack on mobile” on or off.

Blocks with the “Stack on mobile” setting:

• Columns
• Media & Text
• Latest Instagram Posts

Buttons and menus are more readable on mobile when they wrap to multiple lines instead of forcing all content onto a single line. By default, the setting to wrap multiple lines is turned off.

To enable wrapping, follow these steps:

1. Navigate to Appearance → Editor from your site’s dashboard.
2. Edit the page or template containing the block you want to adjust.
3. Open List View and select the block.
4. In the block settings, toggle “Allow to wrap to multiple lines” on.

Blocks with the “Allow to wrap to multiple lines” setting:

• Buttons
• Sharing Buttons
• Navigation
• Social Icons
• Comments
• Row and Stack

Text sized in pixels (px) stays locked at one size. Text sized in em or rem adjusts based on your visitor’s settings and screen size, making your site more accessible and easier to read on different devices.

To change text from pixels to relative units, follow these steps:

1. Click on the block with text you want to resize.
2. In the block settings, find the Typography section.
3. Under Font size, click the custom size icon (two horizontal lines with dots).
4. Click the px unit to change it to em or rem.
5. Enter a numerical value and adjust as needed.

Choosing between em and rem:

• em — Text scales relative to its container (good for captions, labels, or text inside specific blocks)
• rem — Text stays consistent across your whole site (good for body text, headings, and buttons)

You can also customize the font size site-wide instead of adjusting individual blocks.

This section of the guide applies to sites with our WordPress.com Premium, Business, and Commerce plans. For free sites and sites on the Personal plan, upgrade your plan to access this feature.

You can hide specific blocks on desktop or mobile devices using CSS classes. To set this up, follow these steps:

1. Edit the page, post, or template containing the block you want to hide.
2. Select the block by clicking it or selecting it in List View.
3. In the block settings, click Advanced.
4. In the “Additional CSS class(es)” box, enter hide-desktop or hide-mobile:

5. Navigate to your site’s custom CSS settings:
   • Block themes: Appearance → Editor → Styles → ⋮ → Additional CSS
   • Classic themes: Appearance → Customize → Additional CSS
6. Paste the following code and click Save:

/* hide elements on mobile*/
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
/* hide elements on desktop*/
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

Add the CSS code to your site once. After that, you can add the hide-mobile or hide-desktop class to any block, and the CSS will automatically hide it on the specified device.