Removing block square block behind pictures on mobile device

[radaApeta]

Hello,

how can i remove the square outline behind photos on mobile device (the big one). I want it to be the same as on desktop device, clear. Thank you very much 🙂

https://www.pickupstore.cz/

[kevinkarma55 · Accepted solution]

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