White block above square images on product page

Acs2
Tourist
5 0 1

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:) 

 

Replies 7 (7)

kaiyaa
Explorer
254 19 24

Hello @Acs2 

you want to show it something like this 

kaiyaa_0-1717222102099.png

 

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me

techlyser_web
Shopify Partner
1612 299 322

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>

techlyser_web_0-1717222507408.png

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Acs2
Tourist
5 0 1

hi,

thanks for your reply, unfortunately it didnt work 😞

techlyser_web
Shopify Partner
1612 299 322

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>

techlyser_web_0-1717224476748.png

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. 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Acs2
Tourist
5 0 1

yes 🙂

tim
Shopify Expert
3555 298 1317

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.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
Acs2
Tourist
5 0 1

it worked! why did i do that? 😂

thank you!!