Removing gray background when pressing link blocks on mobile

Design help General
1

Hello All,

I would like to remove the gray background that flashes when I tap an icon link on mobile devices. This does not appear when the links are clicked on a computer so you would need to view it on a mobile devise to see what I am talking about. But, here is a snapshot showing the icon links:

1905Ă—889 167 KB

https://preview.webflow.com/preview/paptake?preview=a159823375ae2390130531ee0807a366

Thanks.

1 Like
2

That’s the mobile browsers who add this tap hint.

Control it by adding custom code:

.yourElementClass {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}

If you want to remove it for all links:

a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}
4 Likes
3

@vincent

Thanks for you speedy response. Excuse my coding ignorance, but this is why I use Webflow :smile:. I copied and pasted the code but had not success. I tried it on the logo link.

  1. First I selected the block link that contains the logo
  2. I then add the code to the Custom Attributes in the designer panel on the right; no change
  3. Then I tried adding the code in the Head Code from the dashboard; still no change

I’d greatly appreciate it if you would point out what I am doing wrong.

Thanks

4

Can you show me the exact code you’ve used, and tell me where you’ve used it?

No, please revert this. Good job trying but Custom Attributes aren’t made for that.

This is only part of the solution.

Follow this guide:

  • select the element in question, and write down its “class”. The class name you’ve added to the element to style it. Here the class name is “my-element”.

http://vincent.polenordstudio.fr/snap/1fesf.jpg

  • edit the code I gave you by replacing yourElementClass by yours. A class is written down in code with a dot in front.

    .my-element {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

… or just keep the general code targetting all links:

a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}
  • you’re going to paste this code into the custom code section of your site. First go to the Dashboard:

http://vincent.polenordstudio.fr/snap/q8955.jpg

  • go to Custom Code tab then the Head Code zone

http://vincent.polenordstudio.fr/snap/4bpsy.jpg

  • paste your code there in the HEad section, wrapped into <style> tags and click on Save Changes

http://vincent.polenordstudio.fr/snap/z8k6j.jpg

Here is the complete code to paste:

<style>
     .my-element {
     -webkit-tap-highlight-color: rgba(0,0,0,0);
     -webkit-tap-highlight-color: transparent; /* For some Androids */
     }
</style>

Now the CSS is targetting your elements. publish the site again and test it on mobile.

3 Likes
5

@vincent

Thank you. It is now working!

I greatly appreciate the time you took to help me with this. Your explanation and visuals made it very clear. The mistake I made was that I was applying the code to the wrong element. I was applying it to the block links and not to the element inside those block links.

Thanks again. :smile:

2 Likes
6

Great, thanks Steve for the feedback and the kind words, I really appreciate it!

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.