How to align title and price under the picture debut theme

[BamBam]

Hi Team,

I would like some help to align my price and title in-line of the left edge of my pictures

This is what it looks like on my home page

https://f93wb2drrqs5viqe-45233438871.shopifypreview.com

is the same issue i got on my shop page for each categories product

thanks

joshua

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

.h4.grid-view-item__title.product-card__title {
margin: 12%!important;
}
dl.price.price--listing {
margin: 0 12%!important;
}

[dmwwebartisan]

@BamBam

add the following code at the bottom of your assets/theme.css

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

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

}

[BamBam]

There is some improvement as you can see on the screen shot. the first line of the title is correct however the second line shift back to the left as per my initial problem. As for the other poduct the issue occur as the same initial issue.

also, soon as I put the second code given, it mess up event more .

[dmwwebartisan]

@BamBam

Remove this css class

.h4.grid-view-item__title.product-card__title {
    margin: 12%!important;
}

[BamBam]

Thanks you so much for your help and quick response

[Ollie]

Hey @BamBam .

Thanks for reaching out.

I appreciate you letting us know which theme you are using as well as adding those screenshots. Since the Debut theme is designed and supported by Shopify, we can use free design time for Shopify themes to allow our internal themes team to make the changes on your behalf.

If you are interested in using the design time, you can login to your store using our Contact Us page. This will allow us to securely verify you as the store owner before discussing the changes you would like to see on the online store with a Support Advisor.

Let me know if you have any questions.

[BamBam]

Hi Ollie,

I have a other issue now since we change the coding. When you clic on the product and it goes in the next page, the price is not in the correct position.

https://qdwq2xf0i7km6uoa-45233438871.shopifypreview.com

Thanks

[dmwwebartisan]

@BamBam

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

.template-product dl.price {
    align-items: baseline !important;
}

Thanks!

[BamBam]

Hi,

The coding work perfectly thanks. I also see a other issue as shown on the screen shot, the price doesn’t look right I would prefer to have it on here in the middle .

Thanks

[BamBam]

Hi There,

I was wondering if there is a coding to use for my last message I sent ?

[dmwwebartisan]

@BamBam

Please share your stroe URL.

Thanks!

[BamBam]

https://am1mxd9m1dm7rba8-45233438871.shopifypreview.com

[dmwwebartisan]

@BamBam

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

.product-recommendations__inner dl.price.price--listing {
    margin: 0 12%!important;
    text-align: center;
    align-items: center !important;
}

Thanks!

[BamBam]

thanks you very much for your help all working fine

[PackItChic]

I’ve tried entering this code and it does absolutely nothing.

I also tried the solution for coding under “.product-card” and adding the code there that I found in the forum. But if I CTRL+F my theme.css.liquid there is no code that starts “.product-card”