Set responsive styles for different screen sizes

You can set different block styles for desktop, tablet, and mobile screens in the WordPress editor. This guide shows you how to set responsive styles on a single block and across your whole site.

Set responsive styles for a single block to make it look different on desktop, tablet, and mobile. Changing a style for one screen size does not change how the block appears on the other screen sizes.

To set a style for one screen size, follow these steps:

1. Open the page, post, or template that contains the block you want to change.
2. Select the block by clicking in it.
3. Click the View icon (it looks like a laptop) at the top right of the editor, then select between Desktop, Tablet, or Mobile to view your site in that screen size.
4. Turn on “Responsive styles” by clicking on it:

5. Change the style you want to adjust, such as text alignment, font size, or color. WordPress applies your change only to the screen size you selected.
6. To edit all screen sizes again, click the View icon and select Desktop.

The block now keeps separate styles for each screen size you set. You can also set a block’s text alignment for each screen size from the block toolbar while a tablet or mobile screen size is active.

Set responsive styles in global styles when you want to change every block of the same type at once. This applies the same styles across all blocks of that type, instead of changing one block at a time. For example, you can make every Heading block smaller on mobile across your entire site.

To set responsive styles for every block of one type, follow these steps:

1. Open your site’s global styles from Appearance → Editor → Styles.
2. Click Blocks and select the block you want to change.
3. Open the States dropdown and choose a screen size under Viewport: Tablet or Mobile:

4. Change the styles you want to adjust for that screen size, such as typography, color, or spacing.
5. Repeat for other blocks or screen sizes as needed.

Global styles apply your change to every instance of that block across your posts, pages, templates, patterns, template parts, and Navigation. Learn more about your site’s global styles.

Responsive styles use three screen sizes, based on the width of the visitor’s screen:

• Desktop—your block’s default styles, used on screens wider than 782px.
• Tablet—screens from 480px up to 782px wide.
• Mobile—screens up to 480px wide.

Some themes set their own screen size widths, so the exact point where tablet and mobile styles take effect can vary by theme.