product image size in broadcast

[okocha21]

hello, i would like to change my images size on my product page, i don't want them to have border on the side and have like 80% first image and 20% second image, like in the image i added. Is there a code that could help me achieve this ? Thank you

[DaisyVo]

Hi @okocha21 

Please share with me your store URL?

Best,

Daisy

[DaisyVo]

HI @okocha21 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media (max-width: 749px) {
    .index-product .product__images--mobile-slider .product__slide {
        width: calc(100% - 80px);
        margin: 0;
        border: 1px solid #000;
    }
    .index-product .product__images--mobile-slider .product__slides {
        padding-left: 0px
        scroll-padding: 0;
    }
}

I hope this helps

Best,

Daisy

[Dan-From-Ryviu]

Hi @okocha21 

You can try to add this code to Custom CSS in Online Store > Themes > Customize > Theme settings and check 

@media (max-width: 749px) {
    .index-product .product__images--mobile-slider .product__slide {
        width: calc(100% - 80px);
        margin: 0;
        border: 1px solid #000;
    }
    .index-product .product__images--mobile-slider .product__slides {
        padding-left: 0px
        scroll-padding: 0;
    }
}

[LizHoang]

Hi @okocha21 

You can follow the instruction below: 

1. Go to Shopify > Theme > Customize

2. Copy and paste this code on Theme settings > Custom CSS section

.product__slides {
    border: none !important;
    box-shadow: none !important;
}
@media screen and (max-width: 749px) {
    .product__images--mobile-slider .product__slide {
        width: 80% !important;
    }
}

I hope it helps. 

Liz

[topnewyork]

Hello, @okocha21 
Please share "Store URL"
Thanks!

[Kyle_liu]

Hi @okocha21 

Please share your store URL.