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.
6

Hi @kodkiosken ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media screen and (min-width: 750px) {
.product-info .page-width {
    padding: 0px 3rem 0px 0rem !important;
}
.product__media-list {
    gap: 0px !important;
   border:none !important;
}
.product__media-item>* {
    border:none !important;
}
}