I have been adding code to my site to try and center alight my product tiles, collection headings and descriptions when on the product grid which i was able to do successfully. However now my product titles on the product page are also center aligned but I would like them to be aligned to the left.
I have added other bits of code I found on here that have worked for people trying to move their product titles to the left but they don’t seem to work for me. I think some of the code i added earlier may be overriding the current attempts to move the title but i’m not sure if that is how it works
Any help would be greatly appreciated.
Hi @Robbiej24 ,
Can you kindly share your store link with us? We will check it and suggest you a solution if possible.
@Robbiej24 Please send me the store address.
@Robbiej24 Please follow below steps to align the product title to the left only in the product information section of the product page. Let me know whether it is helpful for you.
- From admin, go to “Online Store” → “Themes”.
- Click action button from the current theme and select “Edit code”.
- Add the below CSS code in the base.css file at the bottom of the file, like in the below attached screenshot.
.product .product__info-wrapper product-info .product__title h1 {
text-align: left !important;
}
Result will be like,
FYI: If this doesn’t help you, share your store URL to check this further and help you on this. It will left align the title only for the product information section on the product page.
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.
Hi i tried that but it didn’t work. https://posterkings.co.uk/
Hi i tried that but it didn’t work. https://posterkings.co.uk/
@Robbiej24 , I think the reason your code didn’t work is because you missed a “}” here. In your base.css file
Should be
@Robbiej24 Thanks for sharing your store URL. The highlighted code in the below attached screenshot is not closed properly, so our code isn’t working for you. The highlighted code and the code we provided do the same work. So, you can remove that highlighted code from the base.css file and let us know whether it works for you.
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.
