Quick shop > always hover state on tablet

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

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

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

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

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);
}

}

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

Best Regards

[Author]

Posts