How can I center the text and price under the product photo on the desktop and mobile version?

Store Design
1

How can I center the text and price under the product photo on the desktop and mobile version?

URL: https://www.cotiereofficial.com/collections/all

PW: test1234

Theme: Symmetry

Center the text and price under the product phot "Basic Shirt 6 HQ + 99,00 Sold out"?
Center the text and price under the product phot "Basic Shirt 6 HQ + 99,00 Sold out"?678×824 46.3 KB

2

Hi @marcelp ,

You can try follow the instruction below:

  1. Go to Online Store → Theme → Edit code.
  2. Assets-> /styles.css. Paste code below into end the file.
.innerer .product-price {
    justify-content: center !important;
}
.innerer a.product-link {
    text-align: center !important;
}
1 Like
3

@Halothemes Thank you for you code it works but it only works on the desktop version. How can I align the text in center on the mobile version too? On the mobile version its still sitting on the left and not centered. Any idea? Thank you!

Center text and price under product photo
Center text and price under product photo828×1792 106 KB

4

Hi @marcelp ,

For mobile version, you can try follow the instruction below:

  1. Assets-> /styles.css. Paste code below into end the file.
@media (max-width: 767.98px){
.innerer .product-price {
    justify-content: center !important;
}
.innerer a.product-link {
    text-align: center !important;
}
}
5

Hey thanks for your help but it does not work for the phone version. Any other idea?

6

Hi @marcelp ,

you can try follow the instruction below:

  1. Assets-> /styles.css. Paste code below into end the file.
@media (max-width: 767.98px){
.product-block .product-info .innerer, .product-block .product-info .innerer .product-price {
    display: block;
    text-align: center !important;
    justify-content: center !important;
}
}