--- title: Responsive block styles and configurable viewports in... description: WordPress 7.1 introduces responsive style states for blocks, allowing Tablet and Mobile viewport-specific styles to be defined both globally (via Global... canonical: https://daily.dev/posts/responsive-block-styles-and-configurable-viewports-in-wordpress-7-1-gbqnu0p1b twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Responsive block styles and configurable viewports in WordPress 7.1 | daily.dev og:description: WordPress 7.1 introduces responsive style states for blocks, allowing Tablet and Mobile viewport-specific styles to be defined both globally (via Global... og:url: https://daily.dev/posts/responsive-block-styles-and-configurable-viewports-in-wordpress-7-1-gbqnu0p1b og:image: https://api.daily.dev/og/posts/gBQnU0p1b.png og:image:alt: Responsive block styles and configurable viewports in WordPress 7.1 og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Responsive block styles and configurable viewports in WordPress 7.1 **[Make WordPress Core](https://daily.dev/sources/wordpresscore)** · 3 min read · 13 upvotes · 4 comments ## Summary WordPress 7.1 introduces responsive style states for blocks, allowing Tablet and Mobile viewport-specific styles to be defined both globally (via Global Styles) and per block instance. Styles support typography, color, background, border, dimensions, spacing, and layout. On the frontend, WordPress generates media-query-scoped CSS and adds stable generated classes to rendered blocks. Default breakpoints are 480px for mobile and 782px for tablet, but both are now configurable using px, em, or rem units via a top-level settings.viewport setting. Sites can disable responsive editing entirely via the responsiveEditingEnabled editor setting, though any already-saved responsive styles continue to render correctly. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I add responsive tablet or mobile styles to a block in WordPress 7.1? WordPress 7.1 lets you define per-viewport styles using @mobile and @tablet keys inside a block's existing style attribute, for example {"style":{"@mobile":{"typography":{"fontSize":"1rem"}}}}. These apply through core block supports like typography, color, background, border, dimensions, spacing, and layout, both via Global Styles and on individual block instances. _daily.dev surfaces WordPress release details like this for developers adapting themes to new block features._ ### What are the default breakpoints for mobile and tablet styles in WordPress 7.1? The default breakpoints are @mobile at width <= 480px and @tablet at 480px < width <= 782px. Values must be non-negative numeric lengths in px, em, or rem; invalid units, percentages, or unitless values are ignored and fall back to defaults. If the tablet value is smaller than or equal to the mobile value, only the mobile breakpoint is used. _Teams configuring theme breakpoints can track exact defaults and edge cases like these through daily.dev._ ### How can I disable responsive style editing for users in the WordPress block editor? Set the responsiveEditingEnabled editor setting to false, which defaults to true. This removes both the Responsive styles toggle in the Editor's View menu and the Viewport group in the States dropdown in Global Styles, while device previews and pseudo states like Hover remain available. Previously saved responsive styles still render unchanged. _daily.dev helps developers locking down editor capabilities keep up with new WordPress configuration options._ ## Community discussion Top comments from developers on daily.dev. **@codexsavage6s** · 0 upvotes > Wait wordpress is just now adding responsive design ## Similar posts on daily.dev - [Call for Testing: Responsive Styling](https://daily.dev/posts/call-for-testing-responsive-styling-4fvcqawer) · Make WordPress Core · 11 upvotes · 0 comments - [Block Visibility in WordPress 7.0](https://daily.dev/posts/block-visibility-in-wordpress-7-0-zyf427eih) · Make WordPress Core · 1 upvotes · 0 comments - [What’s new for developers? \(January 2026\)](https://daily.dev/posts/what-s-new-for-developers-january-2026--apd0zomwg) · WordPress Developer · 19 upvotes · 2 comments --- Tags: [#css](https://daily.dev/tags/css), [#wordpress](https://daily.dev/tags/wordpress), [#ui-design](https://daily.dev/tags/ui-design) [View this post on daily.dev](https://daily.dev/posts/responsive-block-styles-and-configurable-viewports-in-wordpress-7-1-gbqnu0p1b) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Responsive block styles and configurable viewports in WordPress 7.1","url":"https://daily.dev/posts/responsive-block-styles-and-configurable-viewports-in-wordpress-7-1-gbqnu0p1b","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/responsive-block-styles-and-configurable-viewports-in-wordpress-7-1-gbqnu0p1b"},"datePublished":"2026-08-05T06:52:36.086Z","dateModified":"2026-09-14T06:28:03.003Z","description":"WordPress 7.1 introduces responsive style states for blocks, allowing Tablet and Mobile viewport-specific styles to be defined both globally (via Global...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/6ad4f5b66be737a1618019916626b1bd?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/6ad4f5b66be737a1618019916626b1bd?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Make WordPress Core","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Make WordPress Core","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/892d1a79e30e4e8a911b5726c6fb1a06","url":"https://daily.dev/sources/wordpresscore"},"commentCount":4,"discussionUrl":"https://daily.dev/posts/responsive-block-styles-and-configurable-viewports-in-wordpress-7-1-gbqnu0p1b","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":13},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":4}],"keywords":"css,wordpress,ui-design","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Make WordPress Core","item":"https://daily.dev/sources/wordpresscore"},{"@type":"ListItem","position":3,"name":"Responsive block styles and configurable viewports in WordPress 7.1"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/responsive-block-styles-and-configurable-viewports-in-wordpress-7-1-gbqnu0p1b","comment":[{"@type":"Comment","text":"Wait wordpress is just now adding responsive design","datePublished":"2026-08-05T23:43:12.670Z","url":"https://daily.dev/posts/gBQnU0p1b#c-k4lSjXovy","author":{"@type":"Person","name":"Code X Savage","url":"https://daily.dev/codexsavage6s","image":"https://lh3.googleusercontent.com/a/ACg8ocK0nX9sL5dY7tHjUSK8NtYvb4oRSKm0HcLfnPih5DEiqeeSlg=s96-c"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/responsive-block-styles-and-configurable-viewports-in-wordpress-7-1-gbqnu0p1b#faq","mainEntity":[{"@type":"Question","name":"How do I add responsive tablet or mobile styles to a block in WordPress 7.1?","acceptedAnswer":{"@type":"Answer","text":"WordPress 7.1 lets you define per-viewport styles using @mobile and @tablet keys inside a block's existing style attribute, for example {\"style\":{\"@mobile\":{\"typography\":{\"fontSize\":\"1rem\"}}}}. These apply through core block supports like typography, color, background, border, dimensions, spacing, and layout, both via Global Styles and on individual block instances. daily.dev surfaces WordPress release details like this for developers adapting themes to new block features."}},{"@type":"Question","name":"What are the default breakpoints for mobile and tablet styles in WordPress 7.1?","acceptedAnswer":{"@type":"Answer","text":"The default breakpoints are @mobile at width <= 480px and @tablet at 480px < width <= 782px. Values must be non-negative numeric lengths in px, em, or rem; invalid units, percentages, or unitless values are ignored and fall back to defaults. If the tablet value is smaller than or equal to the mobile value, only the mobile breakpoint is used. Teams configuring theme breakpoints can track exact defaults and edge cases like these through daily.dev."}},{"@type":"Question","name":"How can I disable responsive style editing for users in the WordPress block editor?","acceptedAnswer":{"@type":"Answer","text":"Set the responsiveEditingEnabled editor setting to false, which defaults to true. This removes both the Responsive styles toggle in the Editor's View menu and the Viewport group in the States dropdown in Global Styles, while device previews and pseudo states like Hover remain available. Previously saved responsive styles still render unchanged. daily.dev helps developers locking down editor capabilities keep up with new WordPress configuration options."}}]} ```