@sammorganium

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

Всем привет. Подскажите, как сделать блок с похожими статьями на сайте адаптивным под мобильные устройства. Сейчас на ПК все четко отображается, а когда переходишь на моб версию, похожие посты становятся микроскописными и выравниваются по горизонтали. Необходимо, чтобы выравнивалось по вертикали, то есть: картинка (по ширине моб экрана) - снизу заголовок, картинка (по ширине моб экрана) - снизу заголовок.

Вот стили, которые я использовал. Что еще добавить?

.related-posts {
background:#fff;
padding:0px 0 30px 0px;
margin-bottom:30px;
margin-top:15px;
border-radius:3px;
padding-left: 31px;
}
.related-posts-list {
list-style-type:none;
margin:0;
padding:0;
width:100%;
}
.related-posts-list li {
display:inline-block;
width:33.33333%;
margin:0;
float: left;
padding-right:30px;
}
.related-posts-list li h4 {
font-size:13px;
color:#353535
}
  • Вопрос задан
  • 42 просмотра
Пригласить эксперта
Ответы на вопрос 1
@vardoLP
Ват ю сэй эбаут май мама?!
делайте медиазапрос, в нем убирайте у .related-posts-list li float:left; и ширину каждого блока ставьте 100% + display:inline-block меняйте на display:block;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы