Adjust Product Image Limits

[martujv]

Hello!

Basically I want to adjust the limits of the product images on the product page on desktop only.

Right now it's reaching around 60% of the screen, starting from the left.

I would like the limit to be at 50% of the screen so it would look symmetrical.

I attach 2 images so it's easier to see

1. How it's looking right now:

(The red line shows the current image limit)

2. How it should look:

(The blue line shows the image limit at 50% of the screen)

My website is: https://n6ia1fdm0ovh4srq-60150284501.shopifypreview.com and my theme is Stiletto

Thanks in advance!!

[BSSCommerce-B2B · Accepted solution]

Hi @martujv ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.css.

Step 3. Add this code to the end of file

.product.animation.animation--product {
  padding-right: 0px!important;
}
@media (min-width: 960px){
    .product__primary{
       grid-gap: 0px!important;
    }
    .product[data-gallery-size="medium"] .product__primary{
      grid-template-columns:50fr 50fr!important;
    }
    .product__details.product__primary-right {
       padding: 0 3vw!important;
     }
}

Result

If it helps you, please like and mark it as the solution.

Best Regards

[martujv]

It worked, thank you!