diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss index 38d83a43ef8..e936b10f555 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss +++ b/plugins/woocommerce-blocks/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/plugins/woocommerce-blocks/assets/js/blocks/classic-template/single-product.ts b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/single-product.ts index 419d36d49c8..56ec5b0749d 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/single-product.ts +++ b/plugins/woocommerce-blocks/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/plugins/woocommerce-blocks/templates/templates/blockified/single-product.html b/plugins/woocommerce-blocks/templates/templates/blockified/single-product.html index 0fecbef4636..8e21dcd2097 100644 --- a/plugins/woocommerce-blocks/templates/templates/blockified/single-product.html +++ b/plugins/woocommerce-blocks/templates/templates/blockified/single-product.html @@ -7,8 +7,8 @@