0

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

.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>

2
  • А что не так с медиа-запросами? 15 авг 2022 в 12:36
  • Есть ощущение что я загрязняю таким образом код и это можно сделать и без медиа-запросов
    – dhelfy
    15 авг 2022 в 12:39

2 ответа 2

2

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

3
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 15 авг 2022 в 15:07
  • Спасибо! Кажется я просто слишком сильно заморачиваюсь на счет всего этого и не нужно придумывать велосипед :)
    – dhelfy
    15 авг 2022 в 17:58
  • Удачи Вам!) Все получится!)
    – Kolamik
    15 авг 2022 в 18:09
2

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

@media (max-width: 600px) {

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

}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.