Centre price and product title on collection pages

Store Design
1

Hi,

Can anyone help with this? Id like to centre the price and product title on collection pages.

Also is there a way to to make the vendor text bigger as its hard to see it!

Thanks

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

www.roh-roh.com

password: hollybolly

1 Like
4

@JP1704 - please add this css to the very end of your base.css file and check

.card__heading {text-align: center;}
.card-information {text-align: center;}

suyash1_0-1647274552145.png
suyash1_0-1647274552145.png1366×768 217 KB

5

@JP1704

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.card__information, .card-information {
    text-align: center;
}
6

Hi, I’ve tried that but its till not working?

1 Like
7

@JP1704

can you try this

.card__information, .card-information {
    text-align: center !important;
}
8

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
.card__heading {text-align: center;}
.card-information {text-align: center;}

Screenshot:- https://prnt.sc/WJES6CqDLNmV

9

Hi @JP1704 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-card.css->paste below code at the bottom of the file:
.card__heading,
.card-information {
    text-align: center !important;
}

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

1 Like
10

@JP1704 - can you try my given code above? you can see how it looks in screenshot with it

11

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
.card__heading {
text-align: center!important;
}
.card-information {
text-align: center!important;
}
.caption-with-letter-spacing.light {
font-size: 15px;
}

Screenshot:-Screenshot by Lightshot

12

hi, this code works but it needs to be applied here…

You can follow the instruction below:

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

it’s ok

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.