Here's how to solve "Clickable links too close" issue

Question

This question has been asked too many times. So, I will summarize the tips to solve this generally.

1. Browse your website with a Desktop/Laptop computer using either Google Chrome or Mozilla Firefox browser. (I prefer the latter).
2. Right click on the links that are too small or too close to each other, and then choose "Inspect Elements"
3. Now you know the CSS name that causes  "Clickable links too close" issue. For example, "qa-nav-footer-link".
4. Try one of these CSS tricks to apply on our example link: "qa-nav-footer-link"

• Use margin:10px or margin-top: 10px; margin-left:10px or whatever -top/-right/-left/-bottom may work.
• Use padding:10px or padding-top: 10px; padding-left:10px or whatever -top/-right/-left/-bottom may work.
• Change to the larger font size, as this will subsequently also increase space around those links:ex,  font-size:16px;
• Use justify-content: space-evenly; for the outer DIV, like in this case qa-nav-footer.
• Maybe there are more CSS tricks similar to these

You can test with the "Inspect Elements" tool before modifying your CSS file. Make sure you clear cache or you can add pseudo version, for example, my_style.css?v=123.

Comments

Thank you! But why you are not using your own account? Why you left Q2A? Please stay with us...