Hi, I am seeking help in eliminating a gray border around my transparent product image. The website URL is BreathEase.co - I have attached the photo I am referring to.
Topic summary
Gray border appears around a transparent product image in a store using the Dawn theme (site: BreathEase.co). A screenshot was provided to illustrate the issue.
Proposed fix: add custom CSS in base.css targeting the Image with text section to remove any border. Suggested rule: set border: unset; for the elements within the media container (selector provided). An “after” screenshot shows the border removed.
Key details:
- Theme/area affected: Dawn theme, Image with text section.
- Change location: base.css.
- Approach: override any default or inherited border by unsetting it on the media item’s children.
- Evidence: before/after images attached.
Status: A solution has been proposed with visual proof, but confirmation from the original poster is not recorded. Discussion appears open pending validation that the CSS resolves the issue across the site.
Hello @HunterHewitt
Welcome to Shopify Community.
Kindly please add below CSS in base.css file.
body .image-with-text .image-with-text__media-item>* {
border: unset;
}
OUTPUT:
Thanks
1 Like