php - why my pagination does not work on mobile screens

hello I am looking for a responsive automatic pagination. For the moment the one I use is automatic but not responsive. The pagination tabs are created as the elements to be paginated

if we don't have many articles we only have a few tabs

but in my case I have to paginate more than 160 articles so this makes me in increments of 10 16 tabs

what I would like is to know how to achieve this is the pagination tab 1/2/3 ..... 10/11/12

here is what is happening for the moment in responsive

how to solve the problem if possible without javascript

   <div class="container" style=" max-width: 100%;margin:auto;">
                    <nav>
                    <ul class="pagination">
                        <!-- Lien vers la page pr?�c?�dente (d?�sactiv?� si on se trouve sur la 1??re page) -->
                        <li class="page-item <?= ($currentPage == 1) ? "disabled" : "" ?>">
                            <a href="?page=<?= $currentPage - 1 ?>" class="page-link">Pr?�c?�dente</a>
                        </li>
                        <?php for($page = 1; $page <= $pages; $page++): ?>
                          <!-- Lien vers chacune des pages (activ?� si on se trouve sur la page correspondante) -->
                          <li class="page-item <?= ($currentPage == $page) ? "active" : "" ?>">
                                <a href="?page=<?= $page ?>" class="page-link"><?= $page ?></a>
                            </li>
                        <?php endfor ?>
                          <!-- Lien vers la page suivante (d?�sactiv?� si on se trouve sur la derni??re page) -->
                          <li class="page-item <?= ($currentPage == $pages) ? "disabled" : "" ?>">
                            <a href="?page=<?= $currentPage + 1 ?>" class="page-link">Suivante</a>
                        </li>
                    </ul>
                </nav>
            
        </div>

Solution:

You can do this by simply using css. Just make sure to add a media query to this css for whatever breakpoint you need.

This will work with no matter how many elements are in the li. Starting at position 5 and ending at last position minus 5

.pagination .page-item:nth-child(n+5):nth-last-child(n+5) {
  display:none;
}

.pagination .page-item:nth-child(4):after {
  display:block;
  content: '...';
}

<ul class="pagination">
  <li class="page-item">Precedente</li>
  <li class="page-item">1</li>
  <li class="page-item">2</li>
  <li class="page-item">3</li>
  <li class="page-item">4</li>
  <li class="page-item">5</li>
  <li class="page-item">6</li>
  <li class="page-item">7</li>
  <li class="page-item">8</li>
  <li class="page-item">9</li>
  <li class="page-item">10</li>
  <li class="page-item">11</li>
  <li class="page-item">12</li>
  <li class="page-item">Suivante</li>
</ul>