Container Queries в действии

Медиазапросы, которые могут применяться на основе размера родительского элемента, а не всей области просмотра

HTML, используемый в этом примере:

<button class='responsive-button'>
  <img src='cart.png' alt='...'>
  <span class='text'>ADD TO CART</span>
</button>

Сначала мы объявляем элемент кнопки контейнером, а затем добавляем запрос контейнера, указывающий, что если ширина кнопки меньше некоторого определенного значения, текст должен быть скрыт

➡️ @byFrontDeveloper | #tips