diff --git a/assets/section-main-product.css b/assets/section-main-product.css
index 2b7afd744f0..e7a9d94e894 100644
--- a/assets/section-main-product.css
+++ b/assets/section-main-product.css
@@ -620,13 +620,15 @@ a.product__text {
 .product-media-modal__dialog {
   display: flex;
   align-items: center;
-  height: 100vh;
+  height: 100%;
 }
 
 .product-media-modal__content {
-  max-height: 100vh;
+  max-height: 100%;
   width: 100%;
   overflow: auto;
+  padding-right: 5rem;
+  padding-left: 5rem;
 }
 
 .product-media-modal__content > *:not(.active),
@@ -634,6 +636,12 @@ a.product__text {
   display: none;
 }
 
+.product-media-modal__content .global-media-settings {
+  width: auto;
+  height: 90vh; /* Show preview of next image to let user know that this can be scrolled */
+  aspect-ratio: 1;
+}
+
 @media screen and (min-width: 750px) {
   .product-media-modal__content {
     padding-bottom: 2rem;
@@ -653,6 +661,12 @@ a.product__text {
 }
 
 @media screen and (max-width: 749px) {
+  .product-media-modal__content .global-media-settings {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1;
+  }
+
   .product--thumbnail .is-active .product__modal-opener:not(.product__modal-opener--image),
   .product--thumbnail_slider .is-active .product__modal-opener:not(.product__modal-opener--image) {
     display: none;