Make Product Image Occupy All Left Side

Topic summary

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.

Summarized with AI on December 23. AI used: gpt-5.

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

1 Like

Amazing, it worked! Thank you