Need help centering all text under products in Debut Theme

Store Design
1

Hello everyone, I’ve found several answers on how to center the Product title and the price under my products, but for some reason it doesn’t always center everything. Some items are perfectly centered, but some are off. You can see the store here: https://store.livingnotestravelnetwork.com

Here is the code that I Added to my theme.css:

dl.price.price–listing { text-align: center;
}
.h4.grid-view-item__title.product-card__title { text-align: center; width: 100%; display: inline-block;
}
dl.price {
align-items: center;
}
.template-product dl.price{align-items: center; }

Here is a screenshot showing the differences:

2021-08-05 (4).png
2021-08-05 (4).png3840×2160 431 KB

2

@livingnotes

Please add the following code at the bottom of your assets/theme.css file.

.price__regular{
margin-right: 0px !important;
}

Hope this works.

Thanks!

3

@livingnotes

Please add the following code also.

.price dd {
    margin: 0px !important;
}
4

hello @livingnotes

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.price dd {
    margin: 0px !important;
}
5

Hey there. Thank you so much for the suggestion. It did improve the issue, but now some items still are not fully centered (see shot below) and now the price on the product screen is also centered instead of being to the left as it should be.

Inception price is not centered
Inception price is not centered3840×2160 478 KB

Price is now centered instead of being left justified
Price is now centered instead of being left justified3840×2160 502 KB

6

@livingnotes

Please remove the old code and add this new code and check product page price alignment.

#shopify-section-collection .price__regular{
margin-right: 0px !important;
}
#shopify-section-collection .price dd {
    margin: 0px !important;
}

Let me know if this works.

Thanks!

7

Thanks for sending this over.

I removed the old code and implemented this, but it shifted all the product titles back to being left justified.

So basically what I need to have is that everywhere where products are being listed I need the product titles and prices to be fully centered, but on the product page itself the title and price needs to be left justified.

Should I use my old code as is, and then edit the default product page template with the code you suggested? Thanks in advance for the help!

8

@livingnotes

Please add the following code at the bottom of your assets/theme.css file.

.product-single__title {text-align: center;}
.product__policies {text-align: center;}
.shopify-installments {text-align: center;}
.product-form__controls-group {
    justify-content: center;
    text-align: center;
}

Thanks!

9

hello @livingnotes

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.product-single__title {text-align: center;}
.product__policies {text-align: center;}
.shopify-installments {text-align: center;}
.product-form__controls-group {
    justify-content: center;
    text-align: center;
}
10

Hi there, and thank you for the suggestion. However, it still isn’t resolving the issue.

It is looks like the product title and product price are being centered from different points instead of centering both directly under the product title.

Here is the full code that I have right now with your suggestion, along with some screenshots with notes.

dl.price.price–listing { text-align: center;
}
.h4.grid-view-item__title.product-card__title { text-align: center; width: 100%; display: inline-block;
}

dl.price {
align-items: center
}

.product-single__title {text-align: center;}
.product__policies {text-align: center;}
.shopify-installments {text-align: center;}
.product-form__controls-group {
justify-content: center;
text-align: center;
}

This is what I need
This is what I need3840×2160 609 KB

This is how Product page looks after putting in the code
This is how Product page looks after putting in the code3840×2160 649 KB

Notes under images
Notes under images3840×2160 892 KB

Notes under images
Notes under images3840×2160 614 KB

11

hello @livingnotes

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-product .grid.product-single .product__price .price{
	align-items: flex-start;
}
#shopify-section-product-recommendations .grid .grid__item  .price__regular{
	    text-align: center;
           margin: 0 auto;
}
#shopify-section-collection .price.price--listing .price__regular{
	    margin: 0 auto;
}
#shopify-section-collection .price.price--listing {
	        justify-content: center;
	        align-items: center;
}
12

Hi there. This almost did it. I had to edit it as follows:

.template-product .grid.product-single .product__price .price{
align-items: flex-start;
}
#shopify-section-product-recommendations .grid .grid__item .price__regular{
text-align: center;
margin: 0 auto;
}
#shopify-section-collection .price.price–listing .price__regular{
margin: 0 auto;
}
#shopify-section-collection .price.price–listing {
justify-content: center;
align-items: center;
}

.price-item .price-item–regular { text-align: left;}

dl.price.price–listing { text-align: center;
}
.h4.grid-view-item__title.product-card__title { text-align: center; width: 100%; display: inline-block;
}
dl.price {
align-items: center;
}

The only thing left to fix is to get the price on the main product page to be aligned to the left without it affecting the price alignment everywhere else.

2021-08-07 (4).png
2021-08-07 (4).png3840×2160 656 KB

13

hello @livingnotes

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-product  #shopify-section-product-template .grid  .grid__item  .product__price .price{
align-items: flex-start !important;
}
14

Thank you so much! That did it!