Centre product name, price & add to cart button in debut theme

Store Design
1

I am using Debut theme and had added an add to cart button. I am now wanting to centre align the product name, price & add to cart button on the home page and the shop all page without effecting the product pages.

Thanks for your help it is so appreciated

1 Like
2

@web-designer1

Please add the following css code to your assets/theme.css bottom of the file.

@media only screen and (max-width: 749px){
#shopify-section-collection .product-card__title {display: block !important;text-align: center !important;}
#shopify-section-collection .price {display: block !important;text-align: center !important;}
#shopify-section-collection form {text-align: center !important;}
#Collection form {text-align: center !important;}
#Collection .price { display: block; text-align: center !important;}
#Collection .product-card__title {display: block !important;text-align: center !important;}
}

@media only screen and (min-width: 750px){
#shopify-section-collection .product-card__title {display: block !important;text-align: center !important;}
#shopify-section-collection .price {display: block !important;text-align: center !important;}
#shopify-section-collection form {text-align: center !important;}
#Collection form {text-align: center !important;}
#Collection .price { display: block; text-align: center !important;}
#Collection .product-card__title {display: block !important;text-align: center !important;}
}

Thanks!

1 Like
3

YES! This worked thankyou so much.

Is there a way so the underline on hover of product name doesn’t span the width of the div? Alternatively I would be happy with the underline being removed all together if this is easier

Screen Shot 2022-02-07 at 1.21.05 pm.png
Screen Shot 2022-02-07 at 1.21.05 pm.png860×1132 131 KB

1 Like
4

@web-designer1

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

@media only screen and (max-width: 749px){
#shopify-section-collection .product-card__title {max-width: fit-content;margin: 0 auto;}
#Collection .product-card__title {max-width: fit-content;margin: 0 auto;}
}

@media only screen and (min-width: 750px){
#shopify-section-collection .product-card__title {max-width: fit-content;margin: 0 auto;}
#Collection .product-card__title {max-width: fit-content;margin: 0 auto;}
}

Thanks!

1 Like
5

Thankyou!! SO helpful

1 Like
6

@web-designer1

If helpful then please Like Solutions.

Thanks!