Help with collection page products glitch (debut theme)

maxenvisions
Tourist
14 0 1

I was having help on a different issue with my website here: https://community.shopify.com/c/Shopify-Design/Lowering-title-of-collections-on-home-page-amp-collec...and the person helping me gave me code that fixed something but then messed up my products and their layout on the collection pages. I removed the code but the issue was still there. 

 

You can see the issue here, it's hard to explain but it's not supposed to look like this.

fa7b492074c205f4cf4f52ad4d9cd284.png

 

It's supposed to look like this:

17b3770d07af70bad7299fe0e78980af.png

 

My website is:

https://jerseyhypekick.myshopify.com/

Password:

austai

 

Thank you in advance!

0 Likes
HardikDavra
Shopify Partner
2317 363 994

PLease place this code  at the end of theme.scss

.collection-grid-item__overlay {
background-size: contain !important;
    background-position: center center  !important;
}

 

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
maxenvisions
Tourist
14 0 1

Thank you for your response! Unfortunately, it didn't fix the issue 

0 Likes
HardikDavra
Shopify Partner
2317 363 994

It seems that you did not paste the code in the end of theme.scss

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
maxenvisions
Tourist
14 0 1

I took it out because it gave me an issue with the collection thumbnails on the home page and didn't resolve the issue with the product page. 

  

This is before pasting the code:

defafe1a1ccb8f22b1349ac9f73c1518.png

And after pasting the code:

04d66c5c70f9016403f4fd10f21c10d6.png

 

0 Likes
HardikDavra
Shopify Partner
2317 363 994

So what do you want?

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
maxenvisions
Tourist
14 0 1

I want to fix the product page, the two images at the top of the thread of how it looks right now, and how it's supposed to look. When I'm in preview mode it looks how it's supposed to, but then I save changes and on the website it appears the wrong way

0 Likes
HardikDavra
Shopify Partner
2317 363 994
 .collection-hero__image {
background-size: contain !important;
}
PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
maxenvisions
Tourist
14 0 1

where should I place this code?

0 Likes
HardikDavra
Shopify Partner
2317 363 994

At the end of theme.scss

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes