- This topic has 9 replies, 2 voices, and was last updated 3 years, 8 months ago by Tom.
-
AuthorPosts
-
July 13, 2019 at 10:29 pm #957208Ron
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
234×22
a
a.hide-on-desktop.hide-on-tablet
248×24
ahere 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 appreciatedJuly 14, 2019 at 9:39 am #957606TomLead DeveloperLead DeveloperHi 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; }
July 14, 2019 at 5:45 pm #957895RonTom
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 helpJuly 14, 2019 at 6:11 pm #957911LeoStaffCustomer SupportTry this CSS instead:
.header-widget { line-height: 1.8em; }
July 14, 2019 at 6:54 pm #957936Ronthanks 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 helpJuly 14, 2019 at 7:14 pm #957949LeoStaffCustomer SupportTry this:
.header-widget, .footer-widget-2 { line-height: 1.8em; }
July 14, 2019 at 7:40 pm #957959Ronthank you for the quick response
that did the trick!!
Thank You for your help
GeneratePress support is the bestJuly 14, 2019 at 7:52 pm #957962LeoStaffCustomer SupportGlad we could help π
July 19, 2020 at 8:41 am #1368797ShrawanHello 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/”>65Size – 18×22
Overlapping Target – Next β
<ahref=”mydomain(dot)com/page/2/”>Next βJuly 19, 2020 at 4:32 pm #1369077TomLead DeveloperLead DeveloperHi 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 π
-
AuthorPosts
- You must be logged in to reply to this topic.