White block above square images on product page

[Acs2]

How do I get rid of the white block above images on my product page? It wasn’t there when I uploaded them.

bubtech.com.au

thanks:) 

[niraj_patel]

Hello @Acs2 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media (min-width: 750px) {
  .product-media-container.media-fit-cover .media {
       height: 22rem !important;
   }
   .product-media-container .media {
       padding-top: unset !important;
   }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Acs2]

hi,

thanks for your reply, unfortunately it didnt work 😞

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media (min-width: 750px) {
.product-media-container .media {
padding-top: 0 !important;
}
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

CSS work properly but your product image height and width is different that's why it shows gap. 

[Acs2]

yes 🙂

[tim]

In your assets/base.css there is this code (around line 1091):

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

Originally,  position: relative; was position: absolute;

You should change it back.

[Acs2]

it worked! why did i do that? 😂

thank you!!