How can I left align a product title in Dawn theme without affecting the page title?

Solved

How can I left align a product title in Dawn theme without affecting the page title?

TheBurpBoss
Explorer
54 0 14

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!

Accepted Solutions (2)

AvadaCommerce
Shopify Partner
3879 839 973

This is an 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.

banned

View solution in original post

AvadaCommerce
Shopify Partner
3879 839 973

This is an 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

banned

View solution in original post

Replies 6 (6)

AvadaCommerce
Shopify Partner
3879 839 973

This is an 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.

banned
TheBurpBoss
Explorer
54 0 14

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
Shopify Partner
3879 839 973

This is an 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

banned
TheBurpBoss
Explorer
54 0 14

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
Tourist
9 0 3

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
Explorer
105 0 6

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

Screenshot 2023-10-06 at 2.01.52 PM.png