diff --git a/package-lock.json b/package-lock.json
index 65420496fede33..9167f0a9eff4ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7890,6 +7890,7 @@
 				"@wordpress/url": "file:packages/url",
 				"@wordpress/viewport": "file:packages/viewport",
 				"classnames": "^2.2.5",
+				"css-mediaquery": "^0.1.2",
 				"lodash": "^4.17.15",
 				"memize": "^1.0.5",
 				"refx": "^3.0.0",
@@ -13915,6 +13916,11 @@
 				}
 			}
 		},
+		"css-mediaquery": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+			"integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
+		},
 		"css-select": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@@ -22840,7 +22846,7 @@
 			"dependencies": {
 				"clone-deep": {
 					"version": "0.2.4",
-					"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
+					"resolved": "http://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
 					"integrity": "sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=",
 					"dev": true,
 					"requires": {
@@ -22874,7 +22880,7 @@
 					"dependencies": {
 						"kind-of": {
 							"version": "2.0.1",
-							"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
+							"resolved": "http://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
 							"integrity": "sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=",
 							"dev": true,
 							"requires": {
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index 7f00de877c36c2..778bfae2d0ff27 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -43,6 +43,7 @@
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",
 		"classnames": "^2.2.5",
+		"css-mediaquery": "^0.1.2",
 		"lodash": "^4.17.15",
 		"memize": "^1.0.5",
 		"refx": "^3.0.0",
diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/edit-post/src/components/editor-regions/index.js
index f208fed2cef5e0..78e1db06d41682 100644
--- a/packages/edit-post/src/components/editor-regions/index.js
+++ b/packages/edit-post/src/components/editor-regions/index.js
@@ -2,14 +2,47 @@
  * External dependencies
  */
 import classnames from 'classnames';
-
+import { match } from 'css-mediaquery';
+import { difference } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { navigateRegions } from '@wordpress/components';
+import { navigateRegions, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+
+const styleStorage = {};
 
 function EditorRegions( { footer, header, sidebar, content, publish, className } ) {
+	const [ contentWidth, updatecontentWidth ] = useState( {} );
+	const getMQs = ( width ) => {
+		const leastWidth = width < window.innerWidth ? `${ width }px` : `${ window.innerWidth }px`;
+		Object.values( document.styleSheets )
+			.filter( ( sheet ) => sheet.href && ( sheet.href.includes( 'editor-style' ) || sheet.href.includes( 'block-editor' ) || sheet.href.includes( 'block-library' ) ) )
+			.forEach( ( sheet, index ) => {
+				if ( ! styleStorage[ index ] ) {
+					styleStorage[ index ] = [];
+				} else {
+					const rulesToInsert = styleStorage[ index ].filter( ( rule ) => rule.media && match( rule.media.mediaText, { type: 'screen', width: leastWidth } ) );
+					rulesToInsert.forEach( ( rule ) => sheet.insertRule( rule.cssText, sheet.cssRules.length ) );
+					styleStorage[ index ] = difference( styleStorage[ index ], rulesToInsert );
+				}
+				const rulesToDelete = Object.values( sheet.cssRules ).reduce( function( result, rule, rulesIndex ) {
+					if ( rule.media && ! match( rule.media.mediaText, { type: 'screen', width: leastWidth } ) ) {
+						result.push( rulesIndex );
+					}
+					return result;
+				}, [] );
+				let countDeleted = 0;
+				rulesToDelete.forEach( ( item ) => {
+					if ( Number.isInteger( item ) ) {
+						styleStorage[ index ].push( sheet.cssRules[ item - countDeleted ] );
+						sheet.deleteRule( item - countDeleted );
+						countDeleted++;
+					}
+				} );
+			} );
+	};
 	return (
 		<div className={ classnames( className, 'edit-post-editor-regions' ) }>
 			{ !! header && (
@@ -24,12 +57,27 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 				</div>
 			) }
 			<div className="edit-post-editor-regions__body">
+				<div className="edit-post-editor-regions__width-toggles">
+					<Button isTertiary isLarge onClick={ () => {
+						updatecontentWidth( {} );
+						getMQs( 2000 );
+					} }>Desktop</Button>
+					<Button isTertiary isLarge onClick={ () => {
+						updatecontentWidth( { width: '780px', margin: '0 auto', flexGrow: 0 } );
+						getMQs( 780 );
+					} }>Tablet</Button>
+					<Button isTertiary isLarge onClick={ () => {
+						updatecontentWidth( { width: '340px', margin: '0 auto', flexGrow: 0 } );
+						getMQs( 340 );
+					} }>Mobile</Button>
+				</div>
 				<div
 					className="edit-post-editor-regions__content"
 					role="region"
 					/* translators: accessibility text for the content landmark region. */
 					aria-label={ __( 'Editor content' ) }
 					tabIndex="-1"
+					style={ contentWidth }
 				>
 					{ content }
 				</div>
diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss
index 65eceb6e17f040..2dd09a92ebf2fb 100644
--- a/packages/edit-post/src/components/editor-regions/style.scss
+++ b/packages/edit-post/src/components/editor-regions/style.scss
@@ -57,6 +57,14 @@ html {
 	overscroll-behavior-y: none;
 }
 
+.edit-post-editor-regions__width-toggles {
+	position: absolute;
+	top: 30px;
+	z-index: 31;
+	left: 50%;
+	transform: translateX(-50%) translateY(-50%);
+}
+
 .edit-post-editor-regions__content {
 	flex-grow: 1;