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

Solved
Venivoirsg
New Member
6 0 0

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)

Accepted Solutions
dmwwebartisan
Shopify Partner
9824 2235 3072

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 | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 10 (10)
dmwwebartisan
Shopify Partner
9824 2235 3072

@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 | Bag is a cart drawer that maximizes your sales. View app →
dmwwebartisan
Shopify Partner
9824 2235 3072

@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 | Bag is a cart drawer that maximizes your sales. View app →
dmwwebartisan
Shopify Partner
9824 2235 3072

@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 | Bag is a cart drawer that maximizes your sales. View app →
dmwwebartisan
Shopify Partner
9824 2235 3072

@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 | Bag is a cart drawer that maximizes your sales. View app →
Venivoirsg
New Member
6 0 0

Hi @dmwwebartisan 

 

Thanks!

 

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

 

 

Venivoirsg_0-1637838806407.png

 

Venivoirsg
New Member
6 0 0

Hi @dmwwebartisan 

 

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

dmwwebartisan
Shopify Partner
9824 2235 3072

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 | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post