How do I center align elements in my product page? Dawn Theme

Solved
PeterMantu
Tourist
14 2 3

Hi all,

 

Can someone please assist me with aligning elements as shown in the image? I have been struggling with this all day long...my store URL is hereCenter product page elements.png

 

Peter Mantu
Company Website: https://www.pnpaiiih.com/
Shopify Store: https://queenswalkincloset.com/
Accepted Solution (1)

Accepted Solutions
JHKCreate
Shopify Partner
2921 504 723

This is an accepted solution.

Hi @PeterMantu !

 

Let's try the following:

 

- To center the price:

.product .price {
    align-items: flex-start;
    float: center !important;
    justify-content: center;
}

In the code above, "justify-content: center;" was added.

 

- To center the quantities modifier, add the following:

.product-form__quantity {
    margin: auto;
}

 

Cheers!

Did we solve your issue? Like & Mark As Solution to help the community | Should you need any direct help: contact@jhkcreate.com
| Learn more about us: jhkcreate.com


| Satisfied with our solutions? Drop a review on Google

View solution in original post

Replies 2 (2)
JHKCreate
Shopify Partner
2921 504 723

This is an accepted solution.

Hi @PeterMantu !

 

Let's try the following:

 

- To center the price:

.product .price {
    align-items: flex-start;
    float: center !important;
    justify-content: center;
}

In the code above, "justify-content: center;" was added.

 

- To center the quantities modifier, add the following:

.product-form__quantity {
    margin: auto;
}

 

Cheers!

Did we solve your issue? Like & Mark As Solution to help the community | Should you need any direct help: contact@jhkcreate.com
| Learn more about us: jhkcreate.com


| Satisfied with our solutions? Drop a review on Google

View solution in original post

PeterMantu
Tourist
14 2 3

Hi @JHKCreate, thanks for your response. Can you please advice as to where I should paste the above codes?

Peter Mantu
Company Website: https://www.pnpaiiih.com/
Shopify Store: https://queenswalkincloset.com/