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:
Topic summary
A user needed help centering three elements on mobile product pages in the Dawn theme:
- Product price
- Inventory status
- Icon with text
These elements were displaying left-aligned by default on mobile devices.
Solution provided:
A CSS media query targeting screens under 749px width was added to the Product Information section’s Custom CSS:
- Applied
text-align: centerto the price element - Used
justify-content: centerfor icon-with-text items and inventory status
The solution successfully centered all three elements on mobile view. The issue was resolved with confirmation from the original poster that the code worked perfectly.
Hi @dandjevents
Could you share the link to your product page?
Hi @Dan-From-Ryviu the product page link is: https://www.dandjevents.com.au/products/angels-touch-event-hire-package
1 Like
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; }
}
Thank you @Dan-From-Ryviu that worked perfectly!
1 Like
Happy I could help!