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
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 
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;
}
}