htmlcssmobileresponsive-design

How to get rid of box when clicking/tapping on mobile devices?


I'm trying to get rid of a box that appears only on mobile devices when a user taps/holds a link (button). I've noticed when I set the active state color to the color I want the font to be it appears to set the background color as well.

a:active{outline: none; color: #fff;}

Here is how the links look like before and after they are clicked on mobile (looks fine on desktop).

Button before it is clicked:

Button before it is clicked

Button after it is tapped/held:

Button after it is tapped/held


Solution

  • Sounds to me like you want to remove the color property for mobile only. To achive that you can use @media only screen and (max-width: 600px) property in css which will load the css for all devices that have max-width of 600px. Here you can find more info on that https://www.w3schools.com/cssref/css3_pr_mediaquery.asp