Removing block square block behind pictures on mobile device

Store Design
, , ,
2

Hi RadaApeta,

Go to Online store > Themes > click … (three dot next to theme) > Edit code

Find a file called ‘section-main-product.css’ and find a line of code matches the following

.product-media-container.constrain-height.media-fit-contain {
    --contained-width: calc(var(--constrained-height)* var(--aspect-ratio));
    width: min(var(--contained-width), 100%);
}

and before the last line of code ‘}’ add the following extra line

border: none;

making it look like this:

.product-media-container.constrain-height.media-fit-contain {
    --contained-width: calc(var(--constrained-height)* var(--aspect-ratio));
    width: min(var(--contained-width), 100%);
    border: none;
}

this will remove all the border on image but if it didn’t work let me know and I can update

1 Like