Hi,
I’m trying to figure out how I can set all of the items and text to align center on my mobile versions only?
Hi @touchofjoy ,
Which section do you want to change it for? Please send me the section name, I will check it.
Hi,
So basically i want to try and center align all of the info regarding the product, instead of it all being left aligned like the image below:
Hi @touchofjoy ,
Go to Assets > base.css and paste this at the bottom of the file:
@media screen and (max-width: 989px) {
.product__info-wrapper {
text-align: center !important;
}
.product .price {
justify-content: center !important;
}
.product__info-wrapper .quantity {
margin: auto;
}
}
Hope it helps!
Hey, thanks a lot for this, it helped a bit, however still a few items not aligned ive screen shot below. Would you be able to assist with those bits too?
Thanks in advance 
Hi @touchofjoy ,
Please send your site and if your site is password protected, please send me the password. I will check it.
Thanks it’s touchofjoy.co.uk. the password is touchofjoy1
Ah ok so I looked on a mobie device and you’re correct, that has fixed it thank you! However, when I view a smaller window on a browser, some bits are still off center Like below:
Hi @touchofjoy ,
Please change code:
@media screen and (max-width: 989px) {
.product-form__buttons,
.product-form__input {
margin: auto !important;
}
.product__info-wrapper {
text-align: center !important;
}
.eg-trust-badges-list,
.product .price {
justify-content: center !important;
}
.product__info-wrapper .quantity {
margin: auto;
}
}
Hope it helps!
You are awesome! Thank you so much
1 Like