Center product name and price

Solved
Highlighted
Tourist
10 0 1

Hi, I am working on my site and do not like how the product name and price is not centered, how could I make this centered?

Also, how do I remove the hover feature for when customers are viewing from a desktop? I want the price and product below the picture just like it is on mobile.

Shop - www.collectivethreadco.com

Thanks in advance.

 

 

0 Likes
Highlighted

This is an accepted solution.

Hi,
Jack from OpenThinking here!

Paste the following code at the very bottom of your assets/theme.scss.liquid file

.product-item.small--one-half .product-item__meta__inner {text-align: center !important}
.product-item__meta,.product-item__link:hover .product-item__image {opacity:1 !important}
.product-item__meta__inner {position:relative !important}
let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.
⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
1 Like
Highlighted
Tourist
10 0 1

YES!!!!!!!!!!!! THANK YOU!!! 

0 Likes
Highlighted
Tourist
10 0 1

It did work but now on desk top the letters are on top of the picture and are very hard to see. 

How can I fix this? www.collectivethreadco.com

 

0 Likes
Highlighted

This is an accepted solution.

I didn't check on a bigger screen. My bad!

add also this code:

@media only screen and (min-width: 990px) {
	.product-item__meta { position: relative !important; }
}

 let me know if this help you.

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
1 Like
Highlighted
Tourist
10 0 1

YAY! It worked. Would you be able to help me with my banner question I posted as well? Greatly appreciate it!

1 Like
Highlighted
Tourist
10 0 1

Is there a way to make it so the images of the products not look so HUGE when viewing on a desktop. They take up the entire screen

0 Likes
Highlighted

Please explain little better. What images do you mean?

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Tourist
10 0 1

The product images look normal sized on mobile but when i view from a desktop and click on a product, the picture takes up the entire screen. 

0 Likes
Highlighted

try this:

@media only screen and (min-width: 990px) {
.product__photo{max-height:500px;overflow:hidden}
}

(this will crop the height of the photo) adjust max-height:500px with the pixels you want.

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes