How do I centre align the price and name on debut theme?

Hasansaleem1997
Tourist
11 0 3

Hasansaleem1997_0-1630579394337.png

Please refer to the image above, I want to align this text to the centre on the collections page and wherever the product shows.

Store link: varietybazaar.pk

Password: sheeld

 

Replies 10 (10)

Zworthkey
Shopify Partner
5581 642 1565

hii, @Hasansaleem1997 
Paste this code on top of the theme.scss file.

@media only screen and (min-width: 992px) {

dl.price.price--listing.price--sold-out {
    position: relative !important;
    left: 210px !important;
}
.h4.grid-view-item__title.product-card__title {
    position: relative !important;
    left: 210px !important;
}
}

Thank You.

Hasansaleem1997
Tourist
11 0 3

@Zworthkey thanks it worked on that particular page, but it disrupted the view on other pages. Seems like it only changed for sold out products.

Hasansaleem1997_0-1630580541985.pngHasansaleem1997_1-1630580547071.png

 

 

Zworthkey
Shopify Partner
5581 642 1565
.grid-view-item.product-card .price {
    position: relative !important;
    left: 209px !important;
}

Paste this code in theme.scss file,
Thank You.

dmwwebartisan
Shopify Partner
12280 2546 3693

@Hasansaleem1997 

Please add the following code.

.h4.grid-view-item__title.product-card__title {
display: block !important;
text-align: center;
left: 0px !important;
}
.price__regular, .price__sale{ margin-right: 0px !important; }
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Zworthkey
Shopify Partner
5581 642 1565

@Hasansaleem1997 

.h4.grid-view-item__title.product-card__title {
display: block !important;
text-align: center;
left: 0px !important;
}
.price__regular, .price__sale{ 
margin-right: 0px !important;
 }

Add this code in theme.scss

etetava24
Excursionist
13 1 7

@dmwwebartisan This worked great ! Would you be able to help me also centre the prices on my collection page Screen Shot 2021-10-14 at 9.22.54 am.png

Kinjaldavra
Shopify Partner
2302 570 1422

hello @etetava24 


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

.template-collection .price.price--listing {
        align-items: center;
}

 

etetava24
Excursionist
13 1 7

@Kinjaldavra I've done this but it hasn't worked . 

Any ideas ? Screen Shot 2021-10-14 at 2.57.13 pm.png

etetava24
Excursionist
13 1 7

@Kinjaldavra - Figured it out ! Thank you so much for your help 

dmwwebartisan
Shopify Partner
12280 2546 3693

@Hasansaleem1997 

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

@media only screen and (min-width: 992px) {

dl.price.price--listing.price--sold-out {
    position: relative !important;
    left: 210px !important;
}
.h4.grid-view-item__title.product-card__title {
    position: relative !important;
    left: 210px !important;
}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app