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
  • А что не так с медиа-запросами? Commented 15 авг. 2022 в 12:36
  • Есть ощущение что я загрязняю таким образом код и это можно сделать и без медиа-запросов
    – dhelfy
    Commented 15 авг. 2022 в 12:39

2 ответа 2

2

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

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

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

@media (max-width: 600px) {

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

}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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