Изменить размер кнопки в соответствии с шириной экрана

Question

Я реализовал выпадающий список, содержащий текст и значок. Я хочу знать, как удалить текст и сохранить значок, когда размер экрана меньше (например, max-width: 768 px). Можно ли изменить текст div? Или мне нужно создать еще один и просто показать/скрыть оба в соответствии с шириной экрана?

Мой код:

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

Я хочу, чтобы удалить текст и сохранить значок.

Спасибо!

Answer 1

Не нужно создавать другой div, просто используйте запрос @media и используйте css, на котором размер экрана вам нужен значок и на котором вам нужен текст.

Просто оберните текст тегом.

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

а затем css будет;

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