Lighthouse report; targets are not sized appropriately

Hi, I to test my Website with the Tool Lighthouse, about SEO say this,

How have my Nav;

<nav id="navs">
   <ul>
    <li><a href="/es/about_us.php">Nosotros</a></li>
    <li><a href="/es/contact.php">Contactar</a></li>
  </ul>
  <ul>
    <li><a href="/es/index.php">Home</a></li>
  
    <li class="dropdown">
      <a href="#" class="dropbtn">Linux OS</a>
      <div class="dropdown-content">
       <a href="/es/linux_mint.php">Linux Mint</a>
       <a href="/es/ubuntu.php">Ubuntu</a>
       <a href="/es/debian.php">Debian</a>
       <a href="/es/android.php">Android</a>
      </div>
     </li>
     <li class="new-link">
       <a href="#" class="neuen">News & Mas</a>
       <div class="new-content">
          <a href="#">News</a>
          <a href="#">Geek</a>
        </div>
      </li>
      <li><a href="#">Libros</a></li>
      <li class="languag">
        <a href="#" class="language">&#127757; Ingles</a>
        <div class="languages">
         <a href="https://linuxusers.net">Ingles</a>
        <a href="https://linuxusers.net/de/index.php">Aleman</a>
       </div>
      </li> 
   </ul>
</nav>

In CSS habe on my class dropbtn have this value,

.dropbtn {
    padding: 15px;
    padding-top: 9px;
    padding-bottom: 10px;
}

The Web site I to test, https://linuxusers.net/es/index.php?utm_expid=197730067-0.cq0szEyGRfmr1rjg-49UtA.0&utm_referrer=https%3A%2F%2Flinuxusers.net%2Findex.php

My problem is that I dont know how implement as report to say… can Please anyone to say how do it, Thanks!

It just wants you to make the anchor elements bigger, basically, it thinks the ones listed are too small. It is a good catch, I didn’t realise Lighthouse was doing that now, tiny anchor elements are very difficult to tap accurately on mobiles. Bump the font size is one obvious way

See:

Edit: this seems like it might be a good solution, though I haven’t had time to test it and without knowing what your styling is like in the context of the web page can’t say for sure

Thanks for your answer! , I to try how tell on stackoverflow, but nothing to change…

I’d click the learn more link near the errors to see if they have a solution. This is an ideal minimum size. If you wish to comply then perhaps a min-width min-height type of thing. Beware (Peligroso) when you put padding on the text of an anchor you are increasing the clickable or tappable area around the text which may cause the overlapping target error.

Why did you put 15 px padding all the way around then overwrite the top and bottom? Why not .dropbtn {padding: 9px 15px 10px 15px;}?

Thanks for your answer!, I Understand because I to come to this warning, but I don’t how to lose, I have to change to

.dropbtn {padding: 9px 25px 10px 26px;}

but to come to this Warning again…

Here all Code for nav Element

nav {background-color: #d2f5c4; display: flex; }

nav a{
      color: black;
      text-decoration: none;
	  display: inline;
	  padding: 10px 10px 10px ;
	  font-size: 20px;
	  font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
      
}

nav ul {list-style-type: none;  flex: 1 0 auto;}

nav li { display: inline-block;}

nav ul:nth-of-type(2) {
 text-align: right;          /* beweget computer, News und Bucher   */
 padding-right:120px;

}


.dropbtn  {padding: 9px 25px 10px 26px;}



/* Geben an Link1, link2, link3 ; Farbe , Padding, .... */


.dropdown { 
   position: relative; /* brauche um die neue link in Nav zubauen */
}


li a:hover, .dropdown:hover .dropbtn {
     background-color: #f1ebeb;
   
     
}

.dropdown-content {
    display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
    font-size: 13px;
	position: absolute; /* die stellung folgt der Erste Link(li) */
    background-color: #f1f1f1 ;
    min-width: 15px; /* macht größer die Inneren Links */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe  */
    z-index: 1;    /*  Zeigen die Ordnung wie die Links gezeigt werden... */

}



.dropdown-content a {
    color: black;
    padding: 12px 27px 15px 8px;
    text-decoration: none;               /* Bekomme die Liks keine Unten Stricht ....*/
    display: block;
    font-size: 15px;
    text-align: left;
    font-weight: bold;
    
}





.dropdown-content a:hover {
background-color: #9f9e9e;



}
/* Offnen die Innere Links */

.dropdown:hover .dropdown-content {
    display: block;
     top: 30px; 
}



/*  New link to Nav   */




li a:hover, .new-link:hover .neuen{
     background-color: #f1ebeb;   
}

.new-link:hover .new-content {
    display: block;
}

.new-link {

  position: relative;
  

}   

.new-content a {
    color: black;
    padding: 12px 48px;
    text-decoration: none;               /* Bekomme die Liks keine Unten Stricht ....*/
    display: block;
    text-align: right;
    font-size: 16px;
    font-weight: bold;
}



.new-content {
    display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
    font-size: 13px;
	position: absolute; /* die stellung folgt der Erste Link(li) */
    background-color: #f1f1f1 ;
    min-width: 10px; /* macht größer die Inneren Links */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe  */
    z-index: 1;    /*  Zeigen die Ordnung wie die Links gezeigt werden... */
    
}

.new-content {
    color: black;
    text-decoration: none;       /* Bekomme die Liks keine Unten Stricht ....*/
}

.new-content a:hover { background-color: #9f9e9e; }


.new-link:hover .new-content { top: 30px}   



Here’s a screenshot of your overlapping target due to padding. I’m guessing 2px.
overlappingTarget

Can you Please to say me, how to resolve this problem…Thanks , I am since 10 days which to test (on Virtual machine…) my @media, as I thinking today Finish, i to test with Chrome and have the thing very different…