How can I correctly center align titles and prices in my collections?

Store Design
1

Hello,

I am trying to center align my title and prices within my collections. I am using the following code within my theme.css

.grid{

text-align:center !important;

}

dl.price {
display:grid !important;
justify-items: center !important;

}

However, It doesn’t appear to be lining up correctly. At first glance it looks like it was correct but if you look at the difference between the three titles and prices, it differs based on how long the title is. How can I fix this?

Jenna8_0-1642445246223.png
Jenna8_0-1642445246223.png399×161 22.2 KB

My website: pupsncups.us

2 Likes
2

@Jenna8

sorry for that issue bt i can’t see all center not current theme!

3

Hello, @Jenna8 .

Thank you for reaching out and posting this question!

I understand you’re looking to center the titles and prices for your collections. If you’re using a Shopify-supported theme, then this is something that our Theme Support team can help you with. However, it’s important to note that your store needs to be subscribed to a plan in order to be eligible for the complimentary design time offered by our Theme Support. While we’re not able to provide account-specific support via the Shopify Community at this time, we’d be happy to continue assisting you through live chat, email, or callback. Please visit the Shopify Help Center and log in to your account to create a support request.

If you’re using a third-party or custom theme, then I’d recommend checking with the theme designer on support for your theme. If the developer doesn’t offer customization support, then you can consider hiring a developer to help you with your theme. That being said, if you need help finding a developer, I’d recommend taking a look at our directory of certified developers on Shopify Experts.

Which theme are you using at the moment?

4

@Jenna8

Please add the following CSS code to your assets/theme.scss.liquid bottom of the file.

.grid-product__title {
    font-size: 1.23529em;
    width: 100%;
    display: block;
    text-align: center;
}

.grid-product__price-wrap {
    white-space: nowrap;
    width: 100%;
    display: block;
    text-align: center;
}

Thanks!

5

@Jenna8

Please add the following CSS code to your assets/theme.scss.liquid bottom of the file.

.grid-product__title {
    font-size: 1.23529em;
    width: 100%;
    display: block;
    text-align: center;
}

.grid-product__price-wrap {
    white-space: nowrap;
    width: 100%;
    display: block;
    text-align: center;
}

Thanks!

6

I tried adding that code but it didn’t appear to update anything on my website.

7

I’m sorry I am not sure what you need?