diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js
index 4fefbe39ac55ce..70727ac6698801 100644
--- a/packages/edit-site/src/components/global-styles/screen-style-variations.js
+++ b/packages/edit-site/src/components/global-styles/screen-style-variations.js
@@ -4,6 +4,8 @@
 import { Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useZoomOut } from '@wordpress/block-editor';
+import { useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -12,9 +14,12 @@ import ScreenHeader from './header';
 import SidebarNavigationScreenGlobalStylesContent from '../sidebar-navigation-screen-global-styles/content';
 
 function ScreenStyleVariations() {
-	// Move to zoom out mode when this component is mounted
-	// and back to the previous mode when unmounted.
+	// Style Variations should only be previewed in with
+	// - a "zoomed out" editor
+	// - "Desktop" device preview
+	const { setDeviceType } = useDispatch( editorStore );
 	useZoomOut();
+	setDeviceType( 'desktop' );
 
 	return (
 		<>