[Resolved] Google Lighthouse overlapping target issue

Home Forums Support Google Lighthouse overlapping target issue

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #957208
    Ron

    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
    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

    #957606
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #957895
    Ron

    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

    #957911
    Leo
    Staff
    Customer Support

    Try this CSS instead:

    .header-widget {
        line-height: 1.8em;
    }
    #957936
    Ron

    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

    #957949
    Leo
    Staff
    Customer Support

    Try this:

    .header-widget, .footer-widget-2 {
        line-height: 1.8em;
    }
    #957959
    Ron

    thank you for the quick response
    that did the trick!!
    Thank You for your help
    GeneratePress support is the best

    #957962
    Leo
    Staff
    Customer Support

    Glad we could help 🙂

    #1368797
    Shrawan

    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 – 18×22

    Overlapping Target – Next →
    <ahref=”mydomain(dot)com/page/2/”>Next →

    #1369077
    Tom
    Lead Developer
    Lead Developer

    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 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.