Product images stretching/cutting off on mobile

I have noticed that my detailed product images or stretching and cutting off when I click on them through my mobile device. They display fine from the desktop. Is there a way I can correct this through css? Here’s an example of what it’s doing. Thank you!

We’ve encountered this a few times lately - I’ll see if I can get some updates fro our dev-team.

In the meantime, I highly recommend for you to check this thread, if any of it helps you:

Personally, I can’t reproduce this with mobile. Is this the correct shop? https://shop.spreadshirt.com/angelagail

Have you integrated it to your domain or something? I’d need more information to be able to troubleshoot :confused:

Thank you so much for your response Sara! The shop I am experiencing the stretching issue on is shop.spreadshirt.com/southerncharmtee
I do have the shop embedded on my own domain. In the meantime I will check out the thread you posted to see if any of that will help. :):grinning:

1 Like

Should solve it :slight_smile:

1 Like

Where did you add that CSS code? I tried to add that code under my shop and it didn’t correct the issue.

the css code should be added into the page where you have embedded your shop or in the css area of your spreadshirt shop. I would recommend to paste it into your website css - it seems your website css is overwriting spreadshop css. Thats why you have that issue. Pasting the code above into your website css code at the bottom, it should solve it.
If you paste your website url, where your shop is embedded, instead your spreadshop url, we can help better.

I’ve tried using that code multiple different ways, and unfortunately it didn’t fix my exact issue. I believe the code that you are giving me is for the item preview image, which is where all of the products are listed together on one page. That is not where I am having my problem. My problem is only when viewing the detailed “close up” product images from a cell phone. I think what is actually happening is that it is prioritizing 100% width and auto height, because the full width displays but it cuts off the bottom half of the image. I have tried several different variations of code but nothing seems to work exactly like I want/need it to.

I think this is the string of code that is causing the issue but I’m not exactly for sure how to correct it.
.SprdMain .sprd-detail-images__large-image {
display: flex;
width: 100%;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
}

:frowning:

That’s why I asked you to provide your website url where you have embedded the shop, so I can see and help you with the issue.
If you don’t want to make it public, send a private message :slight_smile:

Thank you guys so much for your help, but I finally managed to get the problem figured out. This line of code seems to have corrected the issue.
.SprdMain .sprd-detail-images__large-image {
height: 100% !important;
}

Thank you guys again for all of your help!!

2 Likes

You are very welcome! Nice that our support helped! The life of a Shop Owner can be pretty tough - it’s nice to have a community around you :slight_smile:

1 Like