Archived topic
Google Lighthouse overlapping target issue
9 replies · Started by Ron on July 13, 2019
I run a lighthouse audit and under SEO mobile friendly google reports that
Tap targets are not sized appropriately
69% appropriately sized tap targets
Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements. Learn more.
Tap Target
Size
Overlapping Target
a.hide-on-desktop.hide-on-tablet
234x22
a
a.hide-on-desktop.hide-on-tablet
248x24
a
here is the code for sites custom header
<div><a href="tel:13605720565" rel="nofollow" class="hide-on-desktop hide-on-tablet">Phone Number: 1.360.572.0565</a></div>
<div class="hide-on-mobile">Phone Number: 1.360.572.0565</div>
<div><a href="mailto:info@sonriseapartments.com" target="_top">Send Mail: info@sonriseapartments.com</a></div>
<div>7801 47th Ave NE</div>
<div>Marysville, WA 98270</div>not sure how to adjust
any help would be appreciated
Hi there,
You basically need to give those specific elements a larger line-height value so there's more area to tap on mobile.
You can do it by giving the elements a specific class and using CSS:
.your-class {
line-height: 1.8em;
}Tom
Thank You for the reply
still no joy on satisfying lighthouse
here is the css code used in simple css
`.header-widget-area p {
line-height: 1.8em;
}
my html skills are minimal so I'm sure the code is wrong
Thanks for the help
Try this CSS instead:
.header-widget {
line-height: 1.8em;
}thanks Leo
that worked for the header widget
I have a footer widget 2 with the same issue
so I added the flowing code
`.header-widget {
line-height: 1.8em;
}
.footer-widget 2 {
line-height: 1.8em;
}
since it is not working I'm sure the code is wrong
thanks for the help
Try this:
.header-widget, .footer-widget-2 {
line-height: 1.8em;
}thank you for the quick response
that did the trick!!
Thank You for your help
GeneratePress support is the best
Glad we could help :)
Hello team,
I'm not a pro, so please help solve this issue, if you recommend a code, please give me specific instructions on how and where to insert it.
I am facing a similar problem, where the Lighthouse SEO report says "Tap targets are not sized appropriately"
This is the message - "Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements. Learn more."
This is the area of the page that is problematic -
Tap Target - 65
<ahref="mydomain(dot)com/page/65/">65
Size - 18x22
Overlapping Target - Next →
<ahref="mydomain(dot)com/page/2/">Next →
Hi there,
This kind of thing depends on your site/font sizes.
Any chance you can open a new topic and include the URL to your website so we can give specific CSS?
Let me now :)
