Home Forums Basel – Premium Template Product Image on Mobile

This topic contains 8 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 3 days, 20 hours ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #225706

    sandrofinoribeiro
    Junior consultant

    Hi,

    When I’m in shop page and I mouseover the product image I have the option to appear a bottom bar with “buy now”, “quick view” and “add to wishlist” but in the mobile version this bar is sticky.
    Can I change the appearance of this in mobile maintaining the mouseover bar on desktop version?
    How can I achieve this?

    Thanks
    SR

    Private Content Hidden
    #225712

    sandrofinoribeiro
    Junior consultant

    Here it is what im talking about, attached image.
    How to remove this bar only on mobile and choose other option?

    Thanks
    SR

    Private Content Hidden
    Attachments:
    You must be logged in to view attached files.
    #225779

    Hello,

    Do you mean you want to have this bar sticky on the desktop?

    Best Regards

    #225857

    sandrofinoribeiro
    Junior consultant

    No, on the desktop I want to maintain what I have.
    In the mobile I would prefer other option that the user can see all the product Image.

    Private Content Hidden
    #225873

    Hello,

    I can make this bar transparent and contrast icons. Unfortunately, there is no other way. Please advise if it would work for you?

    Best Regards

    #226002

    sandrofinoribeiro
    Junior consultant

    OK, we can try that solution.

    Private Content Hidden
    #226087

    Hello,

    Please find this code:

    body .basel-hover-base .hover-mask {
    background-color: #05326B;
    }

    And replace it with:

    body .basel-hover-base .hover-mask {
        background-color:transparent:
    }

    And add this one:

    body .basel-hover-base .hover-mask div a{
       color:#05326B;
    }

    Best Regards

    #226317

    sandrofinoribeiro
    Junior consultant

    Hi Elise,

    The transparent bar on the product image was only for mobile, the code you send me puts the bar transparent in both, desktop and mobile…
    Any chance to make this happened?

    Thanks,
    Sandro

    Private Content Hidden
    #226391

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Device you want to changes to be applied.

    Best Regards

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

You must be logged in to reply to this topic.