Debut Theme- Product Page Edits- Resize Images- Centralize Texts

Solved
Highlighted
Excursionist
44 0 7

Hello, I need to resize the photos in the product page to fill the spaces like the photos attached and centralize the text under them. 

because it is too small and the text is shifted to the left 

Is there anyway to do that? My website URL: https://orchidpresets.com/

A help would be very appreciated.

Thanks!  

1.JPG2.jpg

0 Likes
Highlighted
Shopify Partner
863 129 146

Hi There!

Would you mind sharing your store's URL? I can assist on that!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
1 Like
Highlighted
Excursionist
44 0 7
0 Likes
Highlighted
Shopify Partner
863 129 146

This is an accepted solution.

To Align The Text add this code to your theme.scss:

.h4.grid-view-item__title.product-card__title {
    display: block;
    text-align: center;
}


To Align Reviews from Loox when you'll have them:

.loox-rating {
    display: block;
    text-align: center;
}

 
& Finally for the price:

dl.price.price--on-sale {
    display: block!important;
    text-align: center;
}

.price__regular {
    text-align: center;
}

.price--on-sale .price__sale {
    display: block;
    text-align: center;
}

.price__unit {
    text-align: center;
}

.price__availability {
    text-align: center;
}

 
As for the image still checking

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
1 Like
Highlighted
Excursionist
44 0 7

Thanks for the codes but the old and the new price is separated in two different lines. 

 Is there any solution for that? thanks again! 

 gg.JPG

0 Likes
Highlighted
Shopify Partner
863 129 146

This is an accepted solution.

Replace this from the previous code I shared:

.price--on-sale .price__sale {
    display: block;
    text-align: center;
}


with the following:

.price--on-sale .price__sale {
    display: inline-flex;
    text-align: center;
}

 

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
1 Like
Highlighted
Excursionist
44 0 7

Ok, it works perfect! 

But there's another issue. The code makes the text centralized inside the product itself! Unfortunately it doesn't look good! How can I fix it please ? 

dd.JPG

0 Likes
Highlighted
Shopify Partner
863 129 146

This is an accepted solution.

Add the following: 

#ProductSection-product-template > div > div:nth-child(2) > div.product-single__meta > div.product__price > dl > div.price__vendor > dd {
    text-align: left;
}

#ProductSection-product-template > div > div:nth-child(2) > div.product-single__meta > div.product__price > dl > div.price__regular {
    text-align: left;
}

#ProductSection-product-template > div > div:nth-child(2) > div.product-single__meta > div.product__price > dl > div.price__sale {
    text-align: left!important;
    display: flex;
}

#ProductSection-product-template > div > div:nth-child(2) > div.product-single__meta > div.product__price > dl > div.price__unit {
    text-align: left;
}

#ProductSection-product-template > div > div:nth-child(2) > div.product-single__meta > div.product__price > dl > div.price__availability {
    text-align: left;
}
- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
1 Like