Centre all objects on product page

[Vanessa-EC]

Hi, I am using the flex theme by out of the sandbox. Can anyone help me or point me in the direction on how to align all the product information on the product page please, and also change the font colour of the size selection that is in grey? needs to be white. Thank you in advance 

[Vanessa-EC]

[topnewyork]

hi, @Vanessa-EC 

Please send me page Url

[Dan-From-Ryviu]

Hi @Vanessa-EC 

Go to Online store > Themes > Edit code > Assets, open styles.css file, add this code at bottom and save file 

.product__information { tex-align: center; }
.product__information .purchase-details,
.product__information .purchase-details .purchase-details__button,
.product__information .price-ui,
.product__information .field.is-grouped { justify-content: center; }

[Vanessa-EC]

Thank you so much!! It worked but it did not move the options box? Do you also know how to change the colour where it says size 125ml?

[Dan-From-Ryviu]

Can you try to update code to this version and check again?

.product__information { tex-align: center; }
.product__information .purchase-details,
.product__information .purchase-details .purchase-details__button,
.product__information .price-ui,
.product__information .field.is-grouped,
.product__information .variant-selection .swatch { justify-content: center; }

[Vanessa-EC]

[Dan-From-Ryviu]

Could you send me your product page link? Default demo of Flex theme does not have variation so I don't know what class of that part

[Vanessa-EC]

Sure its https://enviouscustomz.com/collections/scentsprays/products/bananas-car-home-scent-spray?variant=405...

[Dan-From-Ryviu]

Code updated 

.product__information { tex-align: center; }
.product__information .purchase-details,
.product__information .purchase-details .purchase-details__button,
.product__information .price-ui,
.product__information .field.is-grouped,
.product__information .variant-selection .swatch { justify-content: center; }

[Vanessa-EC]

You are an absolute legend...thank you so much, you wouldnt know how to change the colour of that text in grey also? and then you totally deserve that coffee for your help and time

[Dan-From-Ryviu]

HI @Vanessa-EC 

Do you mean change color of those text in grey?

[Vanessa-EC]

No the text just above it that you cant read....says size 125ml

[Dan-From-Ryviu]

Please add this additional code 

.product__information .swatch .option-title { color: #fff; }

[Vanessa-EC]

Thank you once again, I just bought you 3 coffees 🙂 have a great day

[Dan-From-Ryviu]

Thanks ❤️. Have a great day!

[Dan-From-Ryviu]

Please update code to this to make Add to wishlist center as well 

.product__information { tex-align: center; }
#wishlisthero-product-page-button-container button { margin: 0 auto; }
.product__information .purchase-details,
.product__information .purchase-details .purchase-details__button,
.product__information .price-ui,
.product__information .field.is-grouped,
.product__information .variant-selection .swatch { justify-content: center; }

[Vanessa-EC]

Hi Dan, I have tried to wishlist to centre but it doesnt work?

[Dan-From-Ryviu]

Hi @Vanessa-EC 

Where did you add the code?

[Vanessa-EC]

At the bottom of the styles.css,liquid 

[Dan-From-Ryviu · Accepted solution]

Please update code

.product__information { tex-align: center; }
#wishlisthero-product-page-button-container button { margin: 0 auto !important; }
.product__information .purchase-details,
.product__information .purchase-details .purchase-details__button,
.product__information .price-ui,
.product__information .field.is-grouped,
.product__information .variant-selection .swatch { justify-content: center; }

[Vanessa-EC]

That worked thank you so much!!

[Dan-From-Ryviu]

You are always welcome

[Vanessa-EC]

Hi Dan, I have just added another question, not sure if you are able to help with this one also. https://community.shopify.com/c/shopify-discussions/add-new-blocks-to-the-product-information-sectio...