Hey all, does anyone know how to make product images stretch to the end of the screen as opposed to leaving a margin from the side of the screen. Ive attached a reference that might help you understand what I mean. I’d also love to know how to to make the corner radius square instead of having slightly rounded edges.
Thanks
URL: https://project-thirteen.com.au/products/raw-hem-trousers
Thanks for sharing the details and the reference images, that really helps in understanding exactly what you’re aiming for. So, it looks like you want your product images to extend fully to the edge of the screen without any side margins and also remove the slightly rounded corners to make them perfectly square.
By default, Shopify themes often have built-in padding or margins around images, which prevents them from reaching the full width of the page. You’ll need to adjust the CSS to remove this spacing.
.product__media img {
width: 100vw !important; /* Full width of the viewport */
max-width: 100% !important;
margin: 0; /* Removes any default margins */
padding: 0; /* Removes any padding */
}
Most Shopify themes apply a slight border-radius to images, which causes those rounded edges. To override this:
In the same Custom CSS section, add:
.product__media img {
border-radius: 0 !important;
}
This should get your product images looking exactly how you want—full width and with sharp corners. If you’re using a heavily customized theme and this doesn’t work perfectly, let me know, and I can guide you on adjusting the specific theme files.
If you need extra help, just let me know asap. Thanks
Daisy.
