{"id":16369969,"date":"2026-08-19T23:00:00","date_gmt":"2026-08-19T23:00:00","guid":{"rendered":"https:\/\/wordpress.org\/documentation\/?post_type=helphub_article&p=16369969"},"modified":"2026-08-19T04:24:45","modified_gmt":"2026-08-19T04:24:45","slug":"responsive-styles","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/responsive-styles\/","title":{"rendered":"Responsive styles"},"content":{"rendered":"\n

Responsive styles let you give a block different settings depending on the screen size it’s viewed on. For example, you can change the font size to be smaller on mobile viewports or make padding tighter on tablet viewports. It’s only included in block themes<\/a> and requires WordPress 7.1 or higher.<\/p>\n\n\n\n

You can set responsive styles two ways: for a block type<\/em> everywhere it’s used on your site, or for a single block in one post, page, template, or pattern. Both options allow you to make changes to typography, color, background, border, dimensions, spacing, and layout settings, whether you’re in the Styles panel<\/a> or in an individual block’s Settings sidebar. What styling options are available depends on what a block supports. <\/p>\n\n\n\n

How responsive styles work<\/h2>\n\n\n\n

The style you set by default for a block is its base style, and it applies at every screen width unless you override it. Tablet and Mobile styles only override the base style within their own breakpoint:<\/p>\n\n\n\n

Viewport<\/th>Applies to<\/th><\/tr><\/thead>
Mobile<\/strong><\/td>Screens 480px wide and narrower<\/td><\/tr>
Tablet<\/strong><\/td>Screens wider than 480px, up to 782px<\/td><\/tr>
Default<\/strong><\/td>Every screen width, including as the fallback for anything you haven’t overridden at Tablet or Mobile<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Tablet and Mobile don’t interfere with each other’s styles. This means that if you set a Tablet style but leave Mobile untouched, Mobile doesn’t inherit your Tablet value. It falls back to the Default style. Set Mobile separately if you want a change to carry through to mobile-sized screens too.<\/p>\n\n\n\n

Theme customization<\/strong><\/p>\n\n\n\n

Your theme can customize the exact widths that count as Tablet and Mobile, so the breakpoints on your site may be slightly different from the defaults above.<\/p>\n\n\n\n

Limitations<\/strong><\/p>\n\n\n\n

Only settings found in a styles panel or a block’s Settings sidebar (typography, color, spacing, borders, dimensions, and layout) can have a separate Tablet or Mobile value. Controls in the block toolbar, such as text alignment, apply to every screen size no matter which device view is selected. Finally, if you want to remove a block at a certain screen size, use the option to show and hide blocks available in the three dot menu in the block toolbar. <\/p>\n\n\n\n

Setting responsive styles for a block type<\/h2>\n\n\n\n

Use this method to change how a block looks across your entire site. For example, making every Heading block smaller on mobile.<\/p>\n\n\n\n

    \n
  1. Go to Appearance > Editor<\/strong>, open the Styles<\/strong> panel, and click Blocks<\/strong>.<\/li>\n\n\n\n
  2. Select the block type you want to change.<\/li>\n\n\n\n
  3. At the top of the block’s panel, open the States<\/strong> dropdown.<\/li>\n\n\n\n
  4. Under Viewport<\/strong>, choose Tablet<\/strong> or Mobile<\/strong>.<\/li>\n<\/ol>\n\n\n\n
    \"Display<\/figure>\n\n\n\n
      \n
    1. Change a style setting. For example, select a smaller font size. The styles panel filters down to just the settings that support responsive values, so you won’t see options that don’t apply.<\/li>\n<\/ol>\n\n\n\n
      \"Typography<\/figure>\n\n\n\n
        \n
      1. To go back to editing the block’s default (desktop) style, open the States<\/strong> dropdown again and choose Default<\/strong>.<\/li>\n<\/ol>\n\n\n\n

        Setting responsive styles for a single block<\/h2>\n\n\n\n

        Use this method to change one block on one post, page, template, or pattern, without affecting every other instance of that block type.<\/p>\n\n\n\n

          \n
        1. Open the post, page, template, or pattern in the editor.<\/li>\n\n\n\n
        2. Click View<\/strong> in the top toolbar and turn on Responsive styles<\/strong>.<\/li>\n<\/ol>\n\n\n\n
          \"View<\/figure>\n\n\n\n
            \n
          1. Switch the view to Tablet<\/strong> or Mobile<\/strong>.<\/li>\n\n\n\n
          2. Select the block you want to change.<\/li>\n\n\n\n
          3. Open the block’s Settings panel and change a style. For example, a smaller font size or different padding.<\/li>\n<\/ol>\n\n\n\n

            While Responsive styles<\/strong> are on and you’re viewing Tablet or Mobile, the selected block’s Settings panel shows a badge naming the device you’re editing. There’s no badge in Desktop view, because changes made there apply to every screen size.<\/p>\n\n\n\n

            \"Block<\/figure>\n\n\n\n

            Switch back to Desktop<\/strong> at any point to confirm the block’s default style is unchanged, or back to Tablet\/Mobile to confirm your override is still there. Turning Responsive styles<\/strong> off returns you to editing the block’s default style, whichever device view you’re in.<\/p>\n\n\n\n

            This works the same way in the Post editor, the Template and Site editor, the Pattern editor, and the Navigation editor.<\/p>\n\n\n\n

            Checking contrast<\/h2>\n\n\n\n

            If you’re editing a text or background color while a viewport state is selected, the contrast checker still works. It checks the color combination that will actually be used at that breakpoint, the same way it does for pseudo states like Hover.<\/p>\n\n\n\n

            If you don’t see these options<\/h2>\n\n\n\n

            If you don’t see the Viewport<\/strong> group in the States dropdown, or the Responsive styles<\/strong> option in the View dropdown, your site administrator may have turned off responsive style editing for your site. Styles that were already set for Tablet or Mobile before this happened will keep displaying correctly. This only affects whether you can edit them.<\/p>\n\n\n\n

            Demo<\/h2>\n\n\n\n
            \n