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

Store Design
1

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
Venivoirsg_0-1637834238690.png1382×774 83.3 KB

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

Venivoirsg_1-1637834349573.png
Venivoirsg_1-1637834349573.png698×1385 111 KB

2

@Venivoirsg

Please share your store URL!

Thanks!

3

Hi @dmwwebartisan

Thanks for responding!

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

4

@Venivoirsg

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

Thanks!

5

Hi @dmwwebartisan

password: holtam

6

@Venivoirsg

Please check following screenshot slider button allready display

2021-11-25_16-10_Calla Heels – Venivoirsg-mobile.jpg
2021-11-25_16-10_Calla Heels – Venivoirsg-mobile.jpg1353×774 49.5 KB

7

@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!

8

Hi @dmwwebartisan

Thanks!

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

Venivoirsg_0-1637838806407.png
Venivoirsg_0-1637838806407.png691×1557 139 KB

9

Hi @dmwwebartisan

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

10

@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;}
}
11

Hi @dmwwebartisan

Works now! thanks!!