Solved

Brooklyn Theme Hover Effect, Product Image Next Button and Image Display on Mobile is messed up

Venivoirsg
Excursionist
12 0 4

Hi all,

 

1: Is there anyone here that could help with adding hovering effect for product images?

 

2: I can't seem to find how to add a next button to show the next picture on the product image as well.

 

Eg.

Venivoirsg_0-1637834238690.png

 

3: My product image on mobile is messed up too.

 

Venivoirsg_1-1637834349573.png

 

 

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@Venivoirsg 

Please remove previous css  and add this new css code 

@media (max-width: 767px){
div#CollectionSection .medium--one-half {
    width: 45% !important;
}

#CollectionSection .grid-uniform {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 0px !important;
}
div#CollectionSection .grid__item { padding-left: 40px !important;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 10 (10)

dmwwebartisan
Shopify Partner
12280 2546 3694

@Venivoirsg 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Venivoirsg
Excursionist
12 0 4

Hi @dmwwebartisan 

 

Thanks for responding!

 

Store url: https://venivoirsg.myshopify.com/

dmwwebartisan
Shopify Partner
12280 2546 3694

@Venivoirsg 

Please share your store password becouse your store is password Protected.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Venivoirsg
Excursionist
12 0 4

Hi @dmwwebartisan 

 

password: holtam

dmwwebartisan
Shopify Partner
12280 2546 3694

@Venivoirsg 

Please check following screenshot slider button allready display

2021-11-25_16-10_Calla Heels – Venivoirsg-mobile.jpg

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Venivoirsg
Excursionist
12 0 4

Hi @dmwwebartisan 

 

Thanks! are we able to have the next button on desktop view as well?

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@Venivoirsg 

Please remove previous css  and add this new css code 

@media (max-width: 767px){
div#CollectionSection .medium--one-half {
    width: 45% !important;
}

#CollectionSection .grid-uniform {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 0px !important;
}
div#CollectionSection .grid__item { padding-left: 40px !important;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Venivoirsg
Excursionist
12 0 4

Hi @dmwwebartisan 

 

Works now! thanks!!

dmwwebartisan
Shopify Partner
12280 2546 3694

@Venivoirsg 

add following css your theme.scss.liquid or timber.scss.liquid bottom of the file.

@media (max-width: 767px){
div#CollectionSection .medium--one-half {
    width: 48% !important;
}

#CollectionSection .grid-uniform {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 0px !important;
}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Venivoirsg
Excursionist
12 0 4

Hi @dmwwebartisan 

 

Thanks!

 

I have added the code, but the mobile view product image still does not change.

 

 

Venivoirsg_0-1637838806407.png