Users are experiencing unwanted grey border lines appearing between sections when using Shopify’s Ride Theme.
Initial Problem:
AndrewGowdy reported grey lines suddenly appearing between sections that weren’t there previously. Screenshots showed borders around header, content sections, and footer.
Solutions Provided:
CSS Code Method: Multiple contributors shared custom CSS snippets to remove specific borders:
.footer__content-bottom { border-top: unset !important; }.header-wrapper--border-bottom { border-bottom: 0px; }.content-container { border: none; }These codes should be added to the theme’s base.css file via Online Store → Themes → Edit code → Assets.
Theme Settings Method: Pair_of_Squares suggested a no-code alternative: Navigate to Themes → Customize → Theme Settings → Content Container, then set border thickness to 0px.
Status:
AndrewGowdy’s issue was successfully resolved using the CSS approach. However, basile3848 recently posted with a similar problem on their store (nemeos.fr), having spent 5 hours attempting CSS fixes without success. This new case remains unresolved and awaiting assistance.
Hello, I have been checking on the previous posts on this topic and have been unsuccessful in trying to remove the grey lines between my sections (screen shots attached). I am using the Ride Theme and did have no borders until last night !!
I am a novice user, but have managed to complete some other customisation using bespoke CSS coding.
Any help would be greatly appreciated.
Hi @AndrewGowdy
This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css
.footer__content-bottom {
border-top: unset !important;
}
Hope you find my answer helpful!
Best regards,
Richard | PageFly
Hi @AndrewGowdy
Would you mind to share your Store URL website? with password if its unpublish. Thanks!
Hi Richard, that removed the bottom grey line !! Unfortunately the other ones remain.
Is there tag for header and the other sections?
Many thanks
cheoto
Thank for info try this one then.
.header-wrapper--border-bottom {
border-bottom: 0px;
}
.content-container {
border: none;
}
legend !! that worked a treat. Many thanks
I found you can also achieve this by going into Themes → Customise (your chosen Theme) → Theme Settings (the Cog icon top left) → Content Container - change the border thickness to 0px. Check if it effects any other content containers, but for me it got rid of the majority of grey lines between sections.
Bonjour, j’ai le même problème pour les lignes. J’ai passé 5h a essayer en modifiant le css de règler le problème. Impossible Pouvez-vous m’aider ?
J’ai mis des photos pour vous montrer le problème…
Merci de m’éclairer je suis désesperer.
Boutique : nemeos.fr
Bonjour, j’ai le même problème pour les lignes. J’ai passé 5h a essayer en modifiant le css de règler le problème. Impossible Pouvez-vous m’aider ?
J’ai mis des photos pour vous montrer le problème…
Merci de m’éclairer je suis désesperer.
Boutique : nemeos.fr
