Issue: Collapsible (accordion) sections on product pages in the RIDE theme appear “invisible.” The content exists in the theme editor but looks whited out both in preview and live view.
Diagnosis: Responders observed that the accordion text and icons are styled white, making them blend into a white background. This includes titles, body text, and SVG icon paths.
Proposed fixes (CSS in Assets/base.css):
Open questions: The original poster asked if boxes should still show with white text and whether changes can be limited to that section. Replies emphasized that everything in the collapse is white, causing invisibility, and provided section-scoped CSS.
Status: No confirmation of resolution yet; awaiting the poster’s implementation/testing. An image attachment was included but not essential to understand the issue.
Hello!
I’ve just noticed my collapsible content featured on each product page has disappeared. It’s still there within the theme, and I can edit it - however it’s completely whited out and not visible when either editing or viewing.
https://oliandkubo.com/products/catalina-maxi-dress-lilac
I’m using RIDE theme.
Thank you!!
Hi @nellienadine ,
They are visible because all texts of that section is white
Hello [email removed]Nellienadine
It’s GemPages support team and glad to support you today.
You can use this custom CSS code on file base.css
.collapsible-content .accordion summary svg path{
fill: #000000;
}
.collapsible-content .accordion summary .accordion__title{
color: #000000;
}
.collapsible-content .accordion summary .accordion__content{
color: #000000;
}
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
But the boxes should show up even if the text is white? Can I change this in custom CSS just for that section? Nothing has been changed in here so not sure why all of a sudden it has disappeared from view.
Everything on your collapse is white color
@nellienadine
Put below css into base.css file (Online store->themes->Edit code->Assets->base.css)
.collapsible-content .accordion summary .accordion__title {
color: black;
}
.collapsible-content .accordion summary svg path {
fill: black;
}
p {
color: black;
}
