How to center everything in product information for refresh theme 2.0

Store Design
1

Hello,

I want the product information (title, starts, icon w/ text, color, quantity, etc.) centered so it aligns with payment badges on desktop. It looks fine on mobile in my opinion, but if it’s centered on mobile too it would give a clean look.

Thank you!

https://ampztechnology.com/products/magsafe-wireless-powerbank

2

Hi @OldCzar

Please add the following code

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
  2. Find the Asset folder, and open the base.css file
  3. Add the code below at the very end of the file
product-info div, variant-radios {
    text-align: center;
}
li.icon-with-text__item {
    align-items: center;
}
variant-radios fieldset.product-form__input, .product-form__input.product-form__quantity {
    max-width: 100%;
}
quantity-input.quantity, .product-form__buttons  {
    margin: auto;
}

See result here

made4Uo_0-1687645076322.png
made4Uo_0-1687645076322.png1525×910 177 KB

3

Thank you for the fast response.

Everything aligns except for the icons with text, those are still to the left.

lefticonstext.png
lefticonstext.png1388×865 168 KB

4

Hi @OldCzar

Please add the code below

li.icon-with-text__item {
    justify-content: center;
}
5

Thank you so much, it worked.

6

Sorry to bother, I have one more question. If lets say I would want to keep the product info the left, and just center the payment icons for desktop only. How would I do that? @made4Uo I would truly appreciate the help, thanks.

leftpayment.png
leftpayment.png1156×908 168 KB