Center product name and price

[jennarose]

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.

[OpenThinking · 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.

[jennarose]

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

[jennarose]

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

[OpenThinking · 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.

[jennarose]

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

[jennarose]

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

[OpenThinking]

Please explain little better. What images do you mean?

[jennarose]

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. 

[OpenThinking]

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.