How to center text collapsible row dropdown text in dawn theme?

[Hannahshin]

Hi, I need help centering the text in the collapsible row dropdown box. I already figured out how to center the header title in the collapsible row, but in the dropdown box text.
Can someone help me, please?

[Guleria]

Hello @Hannahshin ,

Can you please share the store URL?

Regards
Guleria

[Hannahshin]

https://lash101hannah.myshopify.com/

Is this what you are looking for? thanks for your help!

[Guleria]

@Hannahshin  Your store is password protected, please also provide the password to view the store front. 

[Kyle_liu]

Hi @Hannahshin 

Please share your store link and provide a password if available

[Dan-From-Ryviu · Accepted solution]

Hi @Hannahshin 

You can make the text center by adding this CSS code. 

.accordion__content { text-align: center; }

[Hannahshin]

oh my gosh! This worked! Thank you so much for your help!

[Hannahshin]

Solved! Thank you so much for your help! I was struggling for almost 3 hours with this problem. 

[namphan]

Hi @Hannahshin,

Please go to Actions > Edit code > Assets > section-main-product.css file and paste this at the bottom of the file:

.product__accordion .accordion__content {
    text-align: center;
}

[mt686]

Hey! I can help with that. To center the text in the dropdown box of your collapsible row in the Dawn theme, you'll need to adjust the CSS for the dropdown content specifically. Here's how you can do it:

---

Steps to Center Dropdown Text with Custom CSS:

1. Log in to Shopify Admin:

   • Go to Online Store > Themes.
   • Click Edit Code on the Dawn theme.

2. Find the CSS File:

   • Look for theme.css or styles.css in the Assets folder.

3. Add Custom CSS: Add the following code at the bottom of the file:

.product__accordion .accordion__content {
    text-align: center; /* Centers the text in the dropdown */
}

This will center the text within the collapsible row dropdown.

• Save and Test:

  • Save the file and check your product page or wherever the dropdown appears to ensure the text is centered in the dropdown box.

---

Easier Option with EasyEdits:

If you're looking for a simpler way to make this change visually, you can use EasyEdits. It allows you to make these types of style changes without needing to write code. You can edit directly on your store and preview the changes in real time. Plus, you can make edits during the free trial and keep them forever if you don't decide to continue with the app.

---

Let me know if you need more help or if something isn't working! (By the way, I’m the developer of EasyEdits, so feel free to ask about it 😊).