How to make product pictures full width on product page

[dieuxstudios]

 

Hi there,

I want to make my product pictures full width on the mobile version. Tried 1000 things but it didn’t work. Can someone help me please? My store url is: dieux.store

Thank you very much in advance!

[CafeDelMar]

Hey @dieuxstudios.

Here's how to achieve that:

1. Navigate to Sales Channels → Online Store → "Customize" button → Theme settings (Gear icon on the left sidebar) → Custom CSS
2. Add the following code:

@media screen and (max-width: 749px) {
	.product-media-container.constrain-height.media-fit-contain {
	  width: 100% !important;
	}

	ul.product__media-list li {
	margin: 0 !important;
	}

	.product__media-list .product__media-item {
	  width: 100% !important;
	}
}

3. Save (right top corner)
4. Hard refresh the storefront

If done correctly, the result should be like this: