Lighthouse report; targets are not sized appropriatel

Question

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>

How have my nav Code on CSS,

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;          
  padding-right:120px;

}


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



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


.dropdown { 
   position: relative; 
}


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


}

.dropdown-content {
  display: none; 
  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;               
  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;               
    display: block;
    text-align: right;
    font-size: 16px;
    font-weight: bold;
  }
  .new-content {
    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;   

  }
  .new-content {
    color: black;
    text-decoration: none;       
  }
  .new-content a:hover { background-color: #9f9e9e; }

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

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

I to try how here to say, I give on my Tag,

.dropbtn {
padding: 48px 48px;
}

But nothing change...

can Please anyone to tell me how to do it, Thanks!

Answer 1

Tap targets are not sized appropriately: It means you have the size of the Tap targets.

Tap targets are interactive elements, like buttons or links, that users frequently tap. Appropriately-sized tap targets make pages more mobile-friendly and accessible.

If your tap targets are in small in size then it will not be mobile friendly.So users have to zoom in order to read the contents.so Increase the size of the failing tap targets.

In your case failing tag target is anchor elements just increase the size of the anchor element

To Know more Visit:https://developers.google.com/web/tools/lighthouse/audits/tap-targets