How to fix stretchy additional images on mobile view?

Store Design
1

Hi there. I’m looking for a fix for a mobile viewing issue. When I click on the products the main image looks fine but the additional images under it appear stretchy. I have tried resizing the images but that didn’t help. My website is www.shoppationova.com, any help is appreciated!

2

Hi, @MoniL !

You can try adding some custom CSS code to your theme. Here’s how you can do it:

  1. Go to Online Store->Theme->Edit code
  2. Asset->theme.scss or base.css->paste below code at bottom of file
@media only screen and (max-width: 768px) {
    img, iframe {
        object-fit: cover !important;
    }
}

If this doesn’t work, you can try replacing object-fit: cover !important; with object-fit: contain !important; height: auto !important; .

I hope this helps! Let me know if you have any other questions.

3

That did it, thank you so much!!

4

You might try incorporating some unique CSS code into your theme. Here is how to go about it:

Enter the following code at the bottom of the file by going to Online Shop > Theme > Modify Code Asset > theme.scss or base.css.

Object-fit: cover!important; @media only screen and (max-width: 768px) img, iframe;

If this doesn’t work, try substituting object-fit: contain!important; height: auto!important; for object-fit: cover!important.

I hope this is useful. If you have any further inquiries, please let me know.