I have this small line on my homepage, I continue to have these on my website I am not sure why.
Can someone please help me remove it!
Thankyou in advance guys
url: hygiadental.com
pw: melek
Topic summary
A white 1px line appears on a Shopify store’s homepage, causing visual inconsistency. The issue stems from an SVG image being slightly smaller than its viewbox container, creating gaps on the left and right sides where the page background shows through.
Proposed Solutions:
- Add CSS code to
base.csstargeting the specific section ID to override the background color - Alternatively, add custom CSS through the Shopify admin panel (Store Admin > Sales Channels > Online Store > Themes > Customize > Theme Settings)
Root Cause:
The SVG image dimensions don’t fully match the viewbox dimensions, leaving small gaps that reveal the underlying page background as visible white lines.
Both solutions involve applying a background color override to mask the gap rather than resizing the image itself.
Hey @Anonymous ,
Give the following code a try. Add it to your base.css
#shopify-section-template--17256407892068__image_banner_miXpMH
.media {
background-color: #24aed1 !important;
}
Hi @Anonymous
You can add this code to your Custom CSS in store admin > Sale channels > Online Store > Themes > Customize > Theme settings to solve the issue
@Anonymous The issue is with the svg image itself which is slightly smaller than the viewbox. So if you look closely the line is present on the left and right side as well. Now this gap is what shows through as the white “line”, because the page background is showing through it. By adding the background color we override that issue.