How can I center accordion content on various pages?

[Melinda5]

Hello community!

I’m trying to find a way to center a few things:

• accordion info on the product page

• accordion info on the footer menu

• accordion info on FAQ page

Store url: https://1i95dtgkycywlt2y-26499285045.shopifypreview.com

Thanks for all your help in advance!!!

[Dan-From-Ryviu]

Hi @Melinda5

Do you want like this?

Please add this code at the bottom of base.css file in Online store > Theme > Edit code

.accordion__content { 
    text-align: center; 
}
.accordion summary {
    justify-content: center;
}

[PageFly-Henry]

Hi @Melinda5

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.accordion summary {

justify-content: center !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[Melinda5]

Yes that worked for the FAQ desktop view. But for mobile, it doesn’t change anything. Strangely, it displays correctly when I view it from from the theme customizer in mobile view, but not when actually previewing the store from mobile.

Also, it only affected the FAQ page, not for the accordion headings on the product page (it only justifies the content inside, not the heading).

[Melinda5]

Hello, thanks for your help! I tried using that code but it seems the complementary products on the product page won’t center. I was able to use the following code to center the text and price, but the product image won’t center.

@media screen and (max-width: 750px) {

.card.card–horizontal

justify-content: center !important;
}

I also tried using ".complementary-slide .card-wrapper "

Any suggestions? **im trying to do this so it centers only for mobile


Thanks so much!