Media Gallery overflow / show beginning of second product image

[mdzzzz555]

Hi there,

Sense theme > Product page

I am trying to display the second image of the product in the gallery however,  I see it cropped like this only. I edited the width size to 80% to fit my website design, but I would like the second image to appears more than this. I tried everything, I can't figure it out. 

I guess it's related to overflow-x settings but I need help for this

[Moeed]

Hey @mdzzzz555 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[mdzzzz555]

sure! here it is  :

bpiu0d-ih.myshopify.com

password : tattua

Check product page called (Emarati Medwakh with 2 pictures for test)

[Moeed · Accepted solution]

Hey @mdzzzz555 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product__media-list .product__media-item {
    width: 60% !important;
}
.slider.slider--mobile {
    width: 100% !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[mdzzzz555]

Wonderful, thank you very much!!!

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[namphan]

Hi @mdzzzz555,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
    .product__media-list {
        width: 100% !important;
    }
    .product__media-list .product__media-item {
        width: calc(70% - 3rem - var(--grid-mobile-horizontal-spacing)) !important;
    }
}