diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss b/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss
index 38d83a43ef8..e936b10f555 100644
--- a/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss
+++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss
@@ -2,6 +2,7 @@
 	position: relative;
 	// This is necessary to calculate the correct width of the gallery. https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/#:~:text=Solution%20%232%3A%20Float%20Parent%20Container
 	clear: both;
+	max-width: 512px;
 
 	span.onsale {
 		right: unset;
@@ -19,6 +20,5 @@
 
 
 .woocommerce .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.images {
-	width: auto;
+	width: 100%;
 }
-
diff --git a/assets/js/blocks/classic-template/single-product.ts b/assets/js/blocks/classic-template/single-product.ts
index 95ed17dbe84..16373b39fbe 100644
--- a/assets/js/blocks/classic-template/single-product.ts
+++ b/assets/js/blocks/classic-template/single-product.ts
@@ -27,6 +27,7 @@ const getBlockifiedTemplate = () =>
 					{
 						type: 'constrained',
 						justifyContent: 'right',
+						width: '512px',
 					},
 					[ createBlock( 'woocommerce/product-image-gallery' ) ]
 				),
diff --git a/templates/templates/blockified/single-product.html b/templates/templates/blockified/single-product.html
index 0fecbef4636..8e21dcd2097 100644
--- a/templates/templates/blockified/single-product.html
+++ b/templates/templates/blockified/single-product.html
@@ -7,8 +7,8 @@
 
 	<!-- wp:columns {"align":"wide"} -->
 	<div class="wp-block-columns alignwide">
-		<!-- wp:column -->
-		<div class="wp-block-column">
+		<!-- wp:column {"width":"512px"} -->
+		<div class="wp-block-column" style="flex-basis:512px">
 			<!-- wp:woocommerce/product-image-gallery /-->
 		</div>
 		<!-- /wp:column -->