Dawn Theme - How to Center Product Price, Inventory Status and Icon With Text on MOBILE Version

Solved

Dawn Theme - How to Center Product Price, Inventory Status and Icon With Text on MOBILE Version

dandjevents
Tourist
3 0 2

Hey guys, 

 

I'm looking for the code to CENTRE Product Price, Inventory Status and Icon With Text on MOBILE Version.

 

Currently these 3 elements are showing left-aligned:

 

IMG_1001.jpg

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
11579 2268 2447

This is an accepted solution.

Please add this code to Custom CSS of Product information 

@media (max-width: 749px) {
    product-info .price { text-align: center; }
    product-info .icon-with-text .icon-with-text__item,
    product-info .product__inventory { justify-content: center; }
}

Screenshot 2025-03-26 at 15.38.03.png

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

View solution in original post

Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
11579 2268 2447

Hi @dandjevents 

Could you share the link to your product page? 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

Dan-From-Ryviu
Shopify Partner
11579 2268 2447

This is an accepted solution.

Please add this code to Custom CSS of Product information 

@media (max-width: 749px) {
    product-info .price { text-align: center; }
    product-info .icon-with-text .icon-with-text__item,
    product-info .product__inventory { justify-content: center; }
}

Screenshot 2025-03-26 at 15.38.03.png

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

dandjevents
Tourist
3 0 2

Thank you @Dan-From-Ryviu that worked perfectly!

Dan-From-Ryviu
Shopify Partner
11579 2268 2447

Happy I could help! 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.