Removing gray background when pressing link blocks on mobile

Design help General
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