On a Shopify product page using the Stiletto theme (desktop), the product images didn’t reach the far-left edge, leaving an unwanted white gap. The poster shared an annotated screenshot to illustrate the gap and asked for a way to make images occupy the entire left side.
A solution was provided via a CSS tweak added in Online Store → Customize → Settings → Custom CSS. The code applies only on desktop (min-width: 960px) and targets the .product container, removing left padding (padding-left: 0) and adjusting other paddings/margins to eliminate the gap.
The original poster confirmed the CSS change worked as intended. Outcome: issue resolved. Attachments (images/screenshot) were used to show the gap and where to add the CSS, but the core fix is the desktop-only CSS adjustment to the .product section.
Hello!
Basically, I want the product images on the product page (desktop version only) to occupy the whole left side of the screen, without the white gap on the left.
I attach an image for reference:
The blue line shows the natural limits of the product images
The green lines show the white gap that shouldn’t be there, instead the image should occupy also that part
My website is https://n6ia1fdm0ovh4srq-60150284501.shopifypreview.com and my theme is Stiletto
Go yo your online store → Customize → settings → custom css and paste this code there
@media (min-width: 960px) {
.product {
margin-bottom: var(--spacing-16);
padding: 0 3.3vw;
padding-top: 0px;
padding-right: var(--space-outer);
padding-bottom: 0px;
padding-left: 0px;
}
}
Amazing, it worked! Thank you
