Product image - full width on mobile

[ellacoker]

Hello everyone, 

I would like my product image to come full width only on mobile. How do I go about this? Thank you. P.s I would like this accross my whole store.

URL: https://www.habooequestrian.com.au/products/spf-30-base-layers

[B2Bridge]

Hi @ellacoker   , you can follow these steps:

Step 1: Open Online Store -> Themes -> Edit code.

Step 2: Find component-card.css file

Step 3: Paste this code at the bottom of the file

@media screen and (max-width: 749px) {
    .product-media-container.media-type-image.media-fit-contain.global-media-settings.gradient.constrain-height {
        margin: 0!important;
        width: 100%!important;
    }
}

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you 😍

[Dotsquares]

Hi @ellacoker 

In the themes option under Online Store edit the code and paste the below CSS in the CSS file.

@media screen and (max-width: 768px) {
.product__media,
.product__media img,
.product-gallery__media,
.product-media,
.product-media img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
object-fit: cover;
}
}