How do I center the top section on the product page?

[abeillebliss1]

I am using Dawn theme 13.0.1 and have no idea how to center the section that I have circled. Please help!

[niraj_patel]

Hello @abeillebliss1 
Can you share store URL?

[abeillebliss1]

www.abeillebliss.com

[niraj_patel]

@abeillebliss1 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (min-width: 750px){
  .product__info-container {
      text-align: center !important;
      margin: 0 auto !important;
   }
   .price-per-item__container {
       display: flex;
       justify-content: center;
   }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[PageFly-Oliver]

Hi @abeillebliss1 ,

You can try this code by following these steps:

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

Step 2: Search file theme.liquid

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

<style>
@media(min-width:767px){
#MainContent .product__info-wrapper * {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
}
</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

[abeillebliss1]

thank you but that centered the text on the entire page. I only want the section I circled to be centered.

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.product-form__input {
text-align: center;
max-width: 100%;
}
.price-per-item__container {
display: inline-flex;
}
.product__info-container>*+* {
text-align: center;
}
.product__title>* {
text-align: center;
}
.product-form__buttons {
max-width: 100%;
}