Hi @Sportingoodz , you can try this code
product-info#MainProduct-template--24664982749566__main .page-width {
padding-left: 5px !important;
padding-right: 10px !important;
}
Result:
Topic summary
A user seeks to remove padding from product images on their Shopify Dawn theme product page, wanting images to extend closer to the page edge on desktop while maintaining proper mobile display.
Initial Solutions Offered:
- Multiple CSS code snippets were suggested for insertion in
theme.liquidorbase.css - Early attempts either didn’t work or removed padding from the entire page rather than just product images
Working Solution:
The issue was resolved using targeted CSS code:
product-info#MainProduct-template--[ID] .page-width {
padding-left: 0px !important;
padding-right: 10px !important;
}
Key Implementation Details:
- Code placed in
theme.liquidfile - Wrapped in a media query
@media screen and (min-width: 990px)to apply only on desktop - This prevents affecting mobile layout, particularly the add-to-cart button positioning
Status: Resolved. The user confirmed the solution works perfectly with their adjustments.
An alternative no-code solution (Easy Edits app) was also suggested for visual padding adjustments.
