Quick shop > always hover state on tablet

This topic has 5 replies, 2 voices, and was last updated 5 years ago by Elise Noromit.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
November 6, 2019 at 12:36 pm #155147

myobstacles
Participant

Hi there,

I’m now using the Quick Shop product list view. pretty happy with it.
the probem I have at the moment is that on tablets i can’t user it.
On mobile phones the icons and ‘quick shop/add to car buttons’ are always visible. Like the hover state is always active. But not on my tablet….
I like to have these always visible on my tablet as well.
Only on desktop i really wont to hide them until the mouse hovers over the product.

Could you please help me out with that?
Regards,
Florian

November 6, 2019 at 1:40 pm #155168

Elise Noromit
Member

Hello,

I am checking your site and icons also are always visible https://prnt.sc/pt920c

Do you check on a real device or narrowing the browser, if you narrow the browser or see via emulator you should reload the page.

Best Regards

November 6, 2019 at 3:08 pm #155214

myobstacles
Participant

Hi Elise,
Thanks for your response.
I checked via an emulator (chrome).
If you flip the screen (so it becomes 1024 x 768) the icons are unavailable.
Looks they disappear when the screen becomes wider than 768px

I know I can’t do it right for every device. But i’m pretty sure almost every desktop has a resolution of >1280
And most tables are still <1280

So preferable the icons disappear only with a resolution =>1281

I’m not a designer or anything, but would that make sense you think? and could you help me with that?

Regards,
Florian

November 7, 2019 at 7:46 am #155331
Elise Noromit
Member
Hello,

Please add this code to the Theme Settings > Custom CSS > Global:
```
@media (max-width: 1199px) {
body .product-grid-item:not(.basel-hover-base) .product-element-top .basel-wishlist-btn {
        opacity: 1;
    visibility: visible;
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
}
body .basel-hover-quick .quick-shop-wrapper {
        transform: translate3d(0,-40px,0);
    -webkit-transform: translate3d(0,-40px,0);
}
}
```
Best Regards
November 7, 2019 at 3:44 pm #155482

myobstacles
Participant

Thanks Elise!

That helped me out. Now it is working like i want.
I did have to put the following code in the global CSS to fix an issue with the cart button being too far up (40px) on screens between 768 and 1200 px

thanks again! This ticket can be closed

`@media (max-width: 768px) {
body .product-grid-item:not(.basel-hover-base) .product-element-top .basel-wishlist-btn {
opacity: 1;
visibility: visible;
transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
}
body .basel-hover-quick .quick-shop-wrapper {
transform: translate3d(0,-0px,0);
-webkit-transform: translate3d(0,-0px,0);
}

}

November 7, 2019 at 6:17 pm #155522

Elise Noromit
Member

You are welcome! If you have any questions please feel free to contact us.

Best Regards
Author

Posts