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

Question

[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
}

Answer 1

[Юпитер Макс]

делайте медиазапрос, в нем убирайте у .related-posts-list li float:left; и ширину каждого блока ставьте 100% + display:inline-block меняйте на display:block;

Comments

[sammorganium]

А можете подсказать, как для этих стилей медиазапрос прописать. Я пытался, у меня ошибки выдает, что не правильно код написан.

[Igor Ustyugov]

@media screen and (max-width: 768px) {
    .related-posts-list li {
        float: none;
        width: 100%;
        display: block;
    }
}

[sammorganium]

Igor Ustyugov, примерно вот так будет выглядеть:

.related-posts {
background:#fff;
padding:0px 0 30px 0px;
margin-bottom:30px;
margin-top:15px;
border-radius:3px;
padding-left: 31px;
width:100%;
}
.related-posts-list {
list-style-type:none;
margin:0;
padding:0;
width:100%;
}
.related-posts-list li {
display:inline-block;
width:100%;
margin:0;
float: left;
padding-right:30px;
}
.related-posts-list li h4 {
font-size:13px;
color:#353535
}

media screen and (max-width: 768px) {
.related-posts-list li {
float: none;
width: 100%;
display: block;
}
}