Как сделать блок адаптивный?

Question

Есть такой блок, как сделать его адаптивным? Чтобы текст и размеры уменьшались при сужении вьюпорта. Я пробовал проценты но в конечном итоге блок становится СЛИШКОМ маленьким. У меня есть мысль на счет медиа-запросов, но не уверен что это правильный выход.

.statistic-card {
  width: 175px;
  height: 95px;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50% 30%;
  justify-items: center;
  align-items: center;
  font-family: Nunito;
  background-color: white;
}
  
.statistic-card__title {
  font-weight: 700;
  font-size: 12px;
  opacity: 0.5;
  font-family: Quicksand;
}
  
.statistic-card__projects-counter{
  font-weight: 700;
  font-size: 24px;
}

<div class="statistic-card">
  <p class="statistic-card__title">⭐ GREAT PROJECT</p>
  <p class="statistic-card__projects-counter">800+ Done</p>
</div>

Answer 1

не знаю иных способов, кроме как медиа - запросами. Вот тут можно поподробнее про них прочитать: https://habr.com/ru/company/google/blog/173861/ я бы сделала хотя бы один медиа-запрос под этот блок на расширение 370 или 320.

Answer 2

делайте медиазапросы под разные разрешение, например:

@media (max-width: 600px) {

.statistic-card {
  width: 55px;
  height: 45px;
  
}

}

БЛОГ НА HUSL

Как сделать блок адаптивный?

Ответы (2 шт):