Fixing Mobile Usability Errors in Google Search Console

HTML & CSS
1

Hi everyone,
I’ve been working on resolving a Mobile Usability issue reported in Google Search Console. The specific error says: “Clickable elements too close together”, but after adjusting the spacing in my CSS, the issue persists.

Here’s a snippet of the current code for the navigation section

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bus Simulator Ultimate – Play Now!</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="https://busimulatorultimate.com">About</a></li>
            <li><a href="https://busimulatorultimate.com/">Play Game</a></li>
            <li><a href="https://busimulatorultimate.com/">Contact Us</a></li>
        </ul>
    </nav>
</body>
</html>

ul {
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
list-style-type: none;
}
li a {
padding: 15px 25px;
text-decoration: none;
font-size: 1rem;
display: block;
}

2

You need to put the padding on the li elements, not the links (a elements).

Because the links are display block, they essentially take up 100% of the available space minus any margins applied to them.

I took your code and made a codepen (with a forced width on the ul to “simulate” a mobile screen) to show as an example.

I added outlines around the li element and the a element. I then made a second copy of your nav element and applied a class which moved the padding from the link to the li element.

Notice how in the first you can’t see the outline around the link but you can in the second? If your li elements are touching, there is no space between the link elements, which is why the console is throwing the error. But on the second example, it should pass since there is now space between the link elements.