diff --git a/_dev/css/components/products.scss b/_dev/css/components/products.scss
index 88133776..a7e693ff 100644
--- a/_dev/css/components/products.scss
+++ b/_dev/css/components/products.scss
@@ -337,10 +337,14 @@
 
     .modal-body {
       display: flex;
-      margin-left: -30%;
+      margin-left: -35%;
 
       .product-cover-modal {
         background: $white;
+        @include media-breakpoint-down(md) {
+          max-width: 100%;
+          height: auto;
+        }
       }
 
       .image-caption {
@@ -371,7 +375,9 @@
       }
 
       .product-images {
-        margin-left: $extra-large-space;
+        @include media-breakpoint-up(lg) {
+          margin-left: $extra-large-space;
+        }
 
         img {
           width: 9.25rem;
diff --git a/templates/catalog/_partials/product-images-modal.tpl b/templates/catalog/_partials/product-images-modal.tpl
index e6420cd7..26a951a4 100644
--- a/templates/catalog/_partials/product-images-modal.tpl
+++ b/templates/catalog/_partials/product-images-modal.tpl
@@ -30,7 +30,7 @@
         <figure>
           {if $product.default_image}
             <img
-              class="js-modal-product-cover product-cover-modal img-fluid"
+              class="js-modal-product-cover product-cover-modal"
               width="{$product.default_image.bySize.large_default.width}"
               src="{$product.default_image.bySize.large_default.url}"
               {if !empty($product.default_image.legend)}