Hiding an animated button on a tablet

Design help General
1

Hello everyone!

I have a raising-up button on a hover, in the Merchandise section (scroll down). It’s an animation that I implemented into the link block (the button is actually a div, because inside the link block). The problem is that I only want it to work on the desktop, but it still pops up on a tablet. I did selected “None” in the display menu for that button, it works on mobile, but doesn’t work on a tablet—the button still raises up when I click on the block. I appreciate if anyone can suggest a solution. That’s my first website on the webflow, so I might be missing some obvious things.

Here is my site Read-Only: Webflow - F-itzone

2

Hey @AnaKreker! Welcome to the community! :wave:

I took a peek at the project in the Designer and I’m not seeing the button appearing on the tablet breakpoint — did you happen to get it fixed or are you specifically talking about the button showing up when previewing the live project on an actual tablet device?

If it’s the latter, the reason is due to the fact that most tablets use fairly high density displays that trigger the breakpoint(s) larger than the Tablet option shown in Webflow.

An easy way to prevent the button from showing up when a touch device is being used is by adding a media query to your custom code that hides the element itself when the browser detects that the user is using a device where “the primary input mechanism can conveniently hover over elements”:

<style>
@media (hover: hover) { .buy-now-button { display: none; } }
</style>

For the nerdy reference, you can check out the MDN docs below:

Just add the code above to the head custom code section of the specific page or, if the button hover effect is shown on multiple pages, the head custom code section at the project level and the animated button shouldn’t appear on tablets :tada:

3

The issue is on the live site when I check it on an iPad Pro. I did what you said, saved, and published, but the issue persists when I check it on a tablet. Am I missing anything?

Thank you!

Screenshot 2024-09-19 at 11.34.03 AM
Screenshot 2024-09-19 at 11.34.03 AM1790×1414 169 KB

4

I tried pulling up the staging URL from your preview link to check the live site (https://f-itzone.webflow.io) but it’s giving me a 404. Can you please provide a link for the published website so I can check on my end?

5

Hi Anastasia!

The iPad Pro usually shows the desktop version.
You’ll have to set a media query that detects touch devices and hide the button there.
Something like
@media (pointer: coarse) {
.button {
visibility: hidden;
}
}
(take this code with a grain of salt as it’s late here :sweat_smile:)

More info here pointer - CSS: Cascading Style Sheets | MDN

6

It’s: https://www.f-itzone.com/

Thank you!

7

I didn’t know it. Thank you! I’ll try out the code.

1 Like