Solved

How can I center align text and headers in accordians?

ashleyfonseca
Shopify Partner
4 0 0

How do you center all the text and header of these accordians to center align?

 

https://mana-matcha-hawaii.myshopify.com/pages/support

PW: MM2024

 

Screenshot 2024-04-13 at 10.14.55 PM.png

Accepted Solution (1)

PageFly-Noah
Astronaut
1119 201 220

This is an accepted solution.

This is Noah from PageFly - Shopify Page Builder App

 

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

 

<style>
@media screen and (min-width: 768px) {
      .main-accordion--wrapper{
        max-width: 1000px !important;
        margin: auto !important;
      }
.main-accordion--wrapper .accordion-container .title-bar h2{
text-align: center !important;
}
.main-accordion--wrapper .accordion-content{
text-align: center !important;
}
.main-accordion--wrapper .accordion-content summary{
justify-content: center !important;
}
}
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 2 (2)

pawankumar
Shopify Partner
514 66 91

Hi @ashleyfonseca 
Please put this code before the body closing tag </body> in theme.liquid 

<style>
@media screen and (min-width: 768px) {

    .main-accordion--wrapper {
        max-width: 800px;
        margin: 0 auto;
    }
}
</style>

Please check if it is helpful to you
Thanks!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan

PageFly-Noah
Astronaut
1119 201 220

This is an accepted solution.

This is Noah from PageFly - Shopify Page Builder App

 

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

 

<style>
@media screen and (min-width: 768px) {
      .main-accordion--wrapper{
        max-width: 1000px !important;
        margin: auto !important;
      }
.main-accordion--wrapper .accordion-container .title-bar h2{
text-align: center !important;
}
.main-accordion--wrapper .accordion-content{
text-align: center !important;
}
.main-accordion--wrapper .accordion-content summary{
justify-content: center !important;
}
}
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.