What's the solution to inconsistent product image sizes on different pages?

Solved

What's the solution to inconsistent product image sizes on different pages?

collins276
Trailblazer
213 1 32

Hi guys,

I'm struggling with the Product image. I use this codes but the results differs between product pages

 

 .product__media.media.media--transparent{
    width:27vw
  } 
.product-media-container.constrain-height.media-fit-contain {
    margin-right: 3%;
  }

 

The result

Screenshot1.pngScreenshot2.pngScreenshot3.png

 

 

 

 

Can you help me to

1. Set the width of the image about 27vw

2. Move the image near to Product info

Store url: https://189ee3-2.myshopify.com/products/jacket 

 

Screenshot.png

 

Accepted Solution (1)

BSS-Commerce
Shopify Expert
3477 463 526

This is an accepted solution.

Hi @collins276 ,

You can follow these steps:

Online Store > Themes > Edit code > Assets > insert code at the end of file  base.css : 

.product-media-container.media-type-image.media-fit-contain.global-media-settings.gradient.constrain-height {
    width: 27vw !important;
    margin-left: 30% !important;
}

Save and reload the page. 

Hope it works @collins276 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 2 (2)

BSS-Commerce
Shopify Expert
3477 463 526

This is an accepted solution.

Hi @collins276 ,

You can follow these steps:

Online Store > Themes > Edit code > Assets > insert code at the end of file  base.css : 

.product-media-container.media-type-image.media-fit-contain.global-media-settings.gradient.constrain-height {
    width: 27vw !important;
    margin-left: 30% !important;
}

Save and reload the page. 

Hope it works @collins276 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
collins276
Trailblazer
213 1 32

Thank you🙏😀