Left Align product Title Dawn

[TheBurpBoss]

Hi all. I'd like to revert back to left aligned product title in my dawn theme. With help from holks here, I originally needed to center the word 'Product' (the page title) which we accomplished, but in doing so, each product title also became center aligned. I used this code to accomplish:

.main-page-title {
text-align: center;
}
.collection-hero__title, .product__title {text-align: center;}
.title-wrapper-with-link {justify-content: center;}

I tried changing each of the 'center' to 'left' but when i do both the page title and product title move together. is there a way i can left align the product title without affecting the already centered page title?

store: www.theburpboss.com

pw: leistu

Thanks to all of you who help!

[AvadaCommerce · Accepted solution]

Hi @TheBurpBoss ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

.product__info-container .product__title {
    text-align: left !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[AvadaCommerce · Accepted solution]

Hi @TheBurpBoss ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

.product__info-container .product__title {
    text-align: left !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[TheBurpBoss]

Hi @AvadaCommerce, thanks so much. It worked! Is it possible to reduce the padding on the left and right sides within this product component card? On smaller mobile screens, I'd like to have the text be able to be a bit wider. Screenshot attached. Thanks!

[AvadaCommerce · Accepted solution]

Hi @TheBurpBoss ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

@media (max-width: 749px) {
#ProductGridContainer .page-width {
    padding: 0 5px !important;
}
}

Hope it can help you

H

[TheBurpBoss]

Again thanks @AvadaCommerce! It worked. You are kind for helping us learn. Last question, on this same topic, on each individual product page, at the bottom I have the block for the 'product recommendations'. Can this same approach to widen the left and right padding be applied there? I tried modifying a bit of your solution but to no success and didn't want to mess anything up. Thanks!

[KyleA2]

Hi @AvadaCommerce  I have a similar issue but with the product description. I'd like to align the content left in line with my product title. I found the section in the product liquid but not sure how to manipulate without affecting it on mobile as well. Any idea?

Store: www.stablewest.com

[HELDERWRLD]

Hello @AvadaCommerce , tried but didn't work. I'm tryna make my collection and featured products sections like the image bellow on my website.

Website; https://c04baf-2.myshopify.com/
Pass: Diversusoficial