Modifier la taille des boutons en fonction de la largeur de l'écran

Question

J'ai mis en place une liste déroulante qui contient du texte et une icône. Je veux savoir comment puis-je supprimer le texte et garder l'icône lorsque l'écran est plus petit (comme max-width: 768 px). Est-il possible de changer le texte de la div? Ou dois-je en créer un autre et juste afficher/cacher les deux en fonction de la largeur de l'écran?

Mon code est:

<button onclick="myFunction()" class="dropbtn">My List <i class="fa fa-arrow-circle-down" aria-hidden="true"></i></button 

Je veux supprimer le texte et garder l'icône.

Merci!

Answer 1

Pas besoin de créer un autre div, il suffit d'utiliser la requête @media et d'utiliser css à quelle taille d'écran vous voulez l'icône et et sur quel shize vous voulez du texte.

Enveloppez votre texte avec une étiquette.

<button onclick="myFunction()" class="dropbtn"><span>My List</span> <i class="fa fa-arrow-circle-down" aria-hidden="true"></i></button> 

puis css sera comme;

@media screen and (max-width: 768px) { 
    button span{ 
    display: none 
    } 
    button{ 
    padding: 10px; 
    } 
}