Stretched Images - Please Help! [SOLVED]

All images are stretched vertically. I’ve read and tried every fix offered in the forums. Nothing works. I’ve attached an image. The vertical stretching occurs both on desktop and mobile.

Please help - it looks terrible!

Thank you!

www.spaymart.org/store/

Did you manage to fix it? I can’t reproduce :thinking:

No, no fix. On desktop (Windows 10) the images are stretched in Chrome, but not in Edge or Firefox. On mobile (iOS) they’re stretched in Chrome, Safari, Firefox, and Edge.

Maybe this will help you:

1 Like

I added it to the CSS both on the website and here at Spreadshirt. No change.

https://spaymart.org/store/#!/

NOTE: On desktop the images are stretched only in Chrome. On mobile the images are stretched regardless of browser (Chrome, Firefox, Edge). Also, all images are stretched - the designs on the front page, the designs and clothing images when you click for details… basically, all of them.

1 Like

I can reproduce! @sprd-sebastian, will you come to the rescue? :bomb::boom:

PS. @SpayMart, I looooove your designs and your cause!!!

From what I can see, the offending rule is still in your site’s CSS (can be found at https://spaymart.org/wp-content/themes/mts_point_pro/style.css, Line 34).

Please add

img {
    height: 100% !important;
}

to your site’s CSS (preferably in your WordPress). I don’t see that rule anywhere in your code yet.

2 Likes

Thanks for the kind words, Sara! :smiley:

That did the trick, Sebastian - thank you very much!

1 Like

As an owner of two furry rascals, it’s a topic totally close to my heart! :heart: :cat2: :heart: :wink:

1 Like

Sebastian - since adding the code to our css I’m now seeing stretched images on our regular pages. Could this be related?

Link: https://spaymart.org/

Scroll down to “Lifesaving Puzzle” and “Regarding Cats & Dogs.”

Seb is not in the office :frowning:

Buuuut… @sprd-yves is :slight_smile: Can you help?

Could you send some screenshots of this? I can’t reproduce. And like which browser & device?

let me assist here :slight_smile:

This is a sample screenshot with of your current CSS changes:
48

Yes its regarding that code, you added.

To avoid this, remove that code again:

img {
     height: 100% !important;
}

And use that code:

.SprdMain img {
    height: 100% !important;
}

With that code, you limit that changes just to your shop, not to your whole website.

Spreadshirt could add this code, too or limit all css adjustments to that base class selector to avoid Wordpress Theme overwrites.

Hope that helps.

Cheers
Thimo

1 Like

Alright, that’s a fair point. However, I consulted some of our devs and at the moment there is unfortunately no quick fix - as such the project would be too big. It would break more shops than it would fix :cry:

PS. Thanks Thimo!

1 Like

Thanks, lovetee - totally solved it!

2 Likes