Codice php con una stranezza

Ciao!
Nel mio sito ho messo alla fine di ogni articolo una lista dei 10 articoli più recenti inserendo una nuova funzione nel file functions.php:

function show_recent_articles() {
    global $wpdb;
 
    $args = array(
        'posts_per_page' => 10,
        'orderby' => 'date'
               );
    $loop = new WP_Query($args);
        $html .= '<div id="recent-posts"><h3>I più recenti</h3>';
        $html .= '<ul>';
         
        while($loop->have_posts()) {
 
        $loop->the_post();
        $id = get_the_ID();
 
            $html .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a><small></li>';
 
        }
 
    $html .= '</ul></div>';
 
    echo $html;
 
} 

e richiamando la funzione nel file single.php subito prima del tag di chiusura </article>:

<?php show_recent_articles();?>

Il problema è che, come notate, il titolo del primo articolo è più grande, il secondo un po' meno e i restanti 8 sono così piccoli che su smartphone sono illeggibili. In particolare, mentre su pc gli ultimi 8 sono sì piccoli ma rimangono sempre della stessa grandezza, su smartphone diventano sempre più piccini man mano che si arriva all'ultimo articolo.
Come risolvo questo inconveniente?
Grazie a tutti!

[miki92]

Qui c'è un errore:

$html .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a><small></li>'; 

C'è un tag <small> aperto ma non chiuso. Se non serve rimuovilo proprio, altrimenti chiudilo.

Grazie mille! Avevo preso il codice da internet e lo avevo leggermente modificato dimenticandomi di togliere quel tag!