How to make product images large with no border

Store Design

Topic summary

A user seeks to modify the Dawn theme’s product page layout to display larger images without borders between them, similar to a provided screenshot.

Solutions Offered:

  • Targeted CSS approach: Add custom CSS to remove gaps and borders from specific product gallery elements using selectors like #Slider-Gallery and .product__media-item.

  • General layout modification: Switch to a 2-column desktop layout in Theme Editor, then add CSS to base.css that removes column and row gaps from grid elements (media query for screens 750px+). Additional recommendations include using taller product images and increasing page width in Theme Editor settings.

  • Combined solution: Modify base.css or similar stylesheet with CSS that removes padding from .product-info, eliminates gaps from .product__media-list, and removes borders from media items—all scoped to desktop viewports.

Note: One contributor advises prioritizing mobile optimization over extensive desktop customization, as mobile typically drives most traffic.

The discussion remains open with multiple CSS solutions provided but no confirmation of implementation or resolution from the original poster.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
5

A general tip would be not to spend too much time focusing on making tweaks for a huge desktop version, as most of your traffic will likely come from mobile.

To achieve the desired outcome, first, make sure you’ve selected the 2-column layout for desktop in the Theme Editor → Product Page.

Then, go into base.css and paste the following code at the bottom of the file:

@media screen and (min-width: 750px) {
.grid {
column-gap: 0px !important;
row-gap: 0px !important;
}
}

This should give you a similar look and feel to what you requested.

A few more things you could do to maximize the effect include using taller product images. Either by cropping them before uploading or by styling them with css in a standing format.

You can also consider increasing your page width in the Theme Editor (under “Layout”).