How can I 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;

}

.price{

display:flex !important;

justify-content:center !important;

}

dl.price {
align-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-1642290499922.png
Jenna8_0-1642290499922.png1066×430 58.5 KB

2

Hi @Jenna8

Can I get URL of website, I want to take a look and let you know what can be done.

3

It’s actually not a live site yet so I don’t think it will help much. I have a base site set up as a holder right now: pupsncups.us

4

Hi @Jenna8

Try this, go in to your theme.css file and find this class

.grid-product__meta {
  position: relative;
  display: grid;   /* in your code it says display:block, just change it like I wrote */
  padding: 13px 0;
}

Let me know if you fix this.

5

Unfortunately that did not work. I updated my code and it didn’t make any changes to the display at all.