Hi! I need help left aligning these dropdowns on the product page. Everything else on this page is left aligned except these boxes. See attached image!
Thank you!
Topic summary
Main issue: Dropdown (collapsible tab) text on the product page in the Impulse theme was centered while the rest of the page was left-aligned. Images were shared to show the misalignment and where to add code.
Context: In Impulse, collapsible tab text is centered by default when the parent has the attribute data-center-text=true.
Solution proposed: Add a CSS rule to override the default alignment:
- In theme.css.liquid (recommended, at the bottom), or
- Inline in theme.liquid inside a block.
Code:
[data-center-text=true] .collapsible-trigger-btn { text-align: left !important; }
Other notes: One participant requested the store URL, but the issue was resolved without it. Screenshots illustrated both the default setting and the file locations for the fix.
Outcome: The original poster confirmed the CSS override worked. Status: Resolved; no further action requested.
Hi there @TheLStudio
Paste the code in the bottom of the file theme.css.liquid
[data-center-text=true] .collapsible-trigger-btn {
text-align: left !important;
}
Do let me know if this fixes your issue.
Hello @TheLStudio ,
I understand you are facing an issue in your collapsible tab text.
The text is in centre as by default in Impulse theme it is set to be centre
You can change the existing code in your .css file or can copy paste the below mentioned code in theme.liquid file.
[data-center-text=true] .collapsible-trigger-btn { text-align: left !important; }
I hope this helps.
Please let me know if you have any query.
Thank you.
That worked! Thank you 