На одном сайте есть такой блок:
Пробовал медиа-запрос с display: block
для элемента, но не работает. Как сделать такой блок адаптивным?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуНа одном сайте есть такой блок:
Пробовал медиа-запрос с display: block
для элемента, но не работает. Как сделать такой блок адаптивным?
Как вариант сделать так:
.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.: На будущее советую скрывать "контент" своего проекта.
contents
? как он себя ведёт ?
Можно с помощью 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>