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

[Hasansaleem1997]

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

[Zworthkey]

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.

[dmwwebartisan]

@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!

[Hasansaleem1997]

@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.

[Zworthkey]

.grid-view-item.product-card .price {
    position: relative !important;
    left: 209px !important;
}

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

[dmwwebartisan]

@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; }

[Zworthkey]

@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]

@dmwwebartisan This worked great ! Would you be able to help me also centre the prices on my collection page

?

[Kinjaldavra]

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]

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

Any ideas ?

[etetava24]

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