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

246

05 мая 2018, 13:21

На одном сайте есть такой блок:

Пробовал медиа-запрос с display: block для элемента, но не работает. Как сделать такой блок адаптивным?

Answer 1

Как вариант сделать так:

.av-countdown-cell {
    display: contents;
}
#top .av-countdown-style-1 .av-countdown-cell-inner {
    width: 90px;
}
.av-countdown-style-1 .av-countdown-time {
    width: 75px;
    max-width: 80px;
    height: 75px;
}

p.s.: На будущее советую скрывать "контент" своего проекта.

Answer 2

Можно с помощью float

.time-block > .block { 
  float:left; 
  width:200px; 
  height:200px; 
  border:1px solid #ccc; 
}

<div class="time-block"> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
</div>

или же inline-block стоит учесть что у инлайн-блоков появляется обступ между блоками в 2 пикселя.

.time-block>.block { 
  display: inline-block; 
  width: 200px; 
  height: 200px; 
  border: 1px solid #ccc; 
  margin:-2px; 
}

<div class="time-block"> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Парсинг html страницы в jQuery объект

Имеется вся страница, начиная от <!DOCTYPE html>, заканчивая </html>Как мне эту строку распарсить в объект jQuery что бы у меня получился html?

266

HTML

Положение скролла страницы js

Я хочу сделать так: 1js/jquery узнаёт позицию скролла страницы (пиксели сверху) 2

279

HTML

Получить доступ к iframe другого домена

Дело такое

268

HTML

Как исправить искажение картинки?

Как выводить картинку через <img> но что бы она не искажалась ?

223