Fix Google Warning about “Clickable elements too close together”

As a result of higher and higher resolution in mobile devices, text becomes smaller and closer together with the same CSS. Google will warn mobile site with “Clickable elements too close together” in “Mobile Usability report”.

To increase spacing between Categories listing, in templates/__mobile/Styles/styles.css

Find

.AccountOrdersList li {
	clear: both;
	list-style: none;
	margin: 0;
	padding: 5px 0 5px 15px;
}

Replace

.AccountOrdersList li {
	clear: both;
	list-style: none;
	margin: 0;
	padding: 15px 0 15px 15px;
}

Find

.AccountOrdersList li:before {<br>
    content:"\00bb";<br>
    font-family: Verdana;<br>
    font-weight: bold;<br>
    color: #7fc709;<br>
    font-size: 14px;<br>
    position: absolute;<br>
    left: -2px;<br>
    top: 3px;<br>
}

Replace

.AccountOrdersList li:before {<br>
    content:"\00bb";<br>
    font-family: Verdana;<br>
    font-weight: bold;<br>
    color: #7fc709;<br>
    font-size: 14px;<br>
    position: absolute;<br>
    left: -2px;<br>
    top: 13px;<br>
}

Find

#Menu li {
	clear: both;
	list-style: none;
	margin: 0;
	padding: 5px 0 5px 15px;
	position: relative;
}

Replace

#Menu li {
	clear: both;
	list-style: none;
	margin: 0;
	padding: 15px 0 15px 15px;
	position: relative;
}

Leave a Reply

Your email address will not be published. Required fields are marked *