Debut Theme - Center align prices and names in collections and on product pages

[nik132]

Hello, does anyone know how to center align my product name and price under each image on my homepage and center align the product and price on each products page? I think the problem may be that my theme file is .js and my theme.scss file is .liquid but I'm unsure. 

Thank you for your help!

Nik

Using Debut theme and have tried the following code among others: 

/*== Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==*/
dl.price {
    align-items: center;
}

.h4.grid-view-item__title.product-card__title {    
  text-align: center;    
  width: 100%;    
  display: inline-block;
  text-decoration: none;
}

.template-product dl.price{align-items: flex-start;}


.product-recommendations__inner dl.price {
    display: block!important;
    text-align: center;
}

/*== Removes Underline Upon Hover ==*/
.product-card:hover .product-card__title, 
.product-card:focus-within .product-card__title {
  border-bottom: none !important;
}

[Made4uo-Ribe]

Hi @nik132 

Would you mind to share your Store URL website? with password if its protected. Thanks!

[nik132]

https://rcom-incubator.com/

[Beae_Cass · Accepted solution]

Hi @nik132 ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid file
3. Paste below code before </body>:

<style>
.h4.grid-view-item__title.product-card__title,
.product-single__title{
    text-align: center !important;
}
.product-card__title {
    display: flex;
}
.price {
    justify-content: center;
}
</style>

Best regards,

Anthony

[nik132]

Hey Anthony, 

Thanks for this! Home page products are centered but collections in different subheadings aren't. Also there is now a bar upon hovering over the product, separating the product name and price. This is similar to the results I was seeing using the code pasted above. 

Home page products below, looks perfect! We still have to do the proper aspect ratios of pictures and names and such... 

Random collection of incubators here: 

Thanks,

Nik

[Beae_Cass]

@nik132 , Sorry about that, you can add more this code below to center it:

<style>
.h4.grid-view-item__title.product-card__title, .product-single__title {
    justify-content: center;
}
</style>

[nik132]

This is great! Thank you for your help. Now I just need to figure out how to remove that pesky underline upon hovering. 

<style>
.h4.grid-view-item__title.product-card__title,
.product-single__title{
    text-align: center !important;
}
.product-card__title {
    display: flex;
}
.price {
    justify-content: center;
}
</style>
<style>
.h4.grid-view-item__title.product-card__title, .product-single__title {
    justify-content: center;
}
</style>

This code didn't seem to help.. 

/*== Removes Underline Upon Hover ==*/
.product-card:hover .product-card__title, 
.product-card:focus-within .product-card__title {
  border-bottom: none !important;
}

How do I mark all of the replies as the solution since the solution is both parts? 

Thanks,

Nik

[Beae_Cass]

@nik132 , To remove the underline under the title, you can add the code below

<style>
.product-card:hover .product-card__title {
    border: unset !important;
}
</style>

@ 

[nik132]

Thank you that fixed the smaller issue!

I just noticed the Add to Cart button is still aligned to the left on all the product pages... D'oh. It's always hard fixing things that seem simple enough. 

Thank you for your help Anthony. Appreciate it!

Nik

[Beae_Cass]

I will help you fix it, you can add the following code if you want it to look like this:

<style>
.product-single__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.product-form {
    justify-content: center;
}
</style>