Home Forums Basel – Premium Template Quick shop > always hover state on tablet

This topic contains 5 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 1 week, 3 days ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #155147

    myobstacles
    Customer

    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

    Private Content Hidden
    #155168

    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

    #155214

    myobstacles
    Customer

    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

    #155331

    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

    #155482

    myobstacles
    Customer

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

    }

    #155522

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

    Best Regards

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

The topic ‘Quick shop > always hover state on tablet’ is closed to new replies.