Как изменить размер миниатюры поста на домашней странице

Question

Я хотел бы изменить размер миниатюр сообщений в моей домашней странице в мобильном представлении . Я сделал это на рабочем столе и планшете, но я не могу сделать это на мобильном телефоне. Мой сайт www.aytepignosi.com. Миниатюры теперь слишком маленькие, как вы можете видеть на скриншоте. Я хотел бы сделать их такими, как они есть на рабочем столе, это означает, что изображение центрируется и автоматически изменяется в соответствии с размером экрана. CSS, который я использовал для настольных компьютеров:

.post-body img {
width:100%;
height:100%;
display: block;
}

А также, если это применимо к заголовкам сообщений, опять же только для домашней страницы в мобильном представлении . Когда я открываю пост, все кажется в порядке. Заранее спасибо. (Я использую блоггер)

Это html изображения самого последнего сообщения:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-b_CL20DIHaY/Xn9AAIf_hBI/AAAAAAAAIc0/LIgULtr32mcItRO67cQ9NMJDyegolowwQCLcBGAsYHQ/s1600/%25CE%25B5%25CE%25BA%25CF%2587%25CE%25B1%25CF%2581%25CF%2584%2B%25CF%2584%25CE%25BF%25CE%25BB%25CE%25BB%25CE%25B5%2B%25CF%2580%25CE%25B1%25CE%25BD%25CE%25B4%25CE%25B7%25CE%25BC%25CE%25B9%25CE%25B1%2B2%2B%25282%2529.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="644" data-original-width="1145" height="111" src="https://1.bp.blogspot.com/-b_CL20DIHaY/Xn9AAIf_hBI/AAAAAAAAIc0/LIgULtr32mcItRO67cQ9NMJDyegolowwQCLcBGAsYHQ/s1600/%25CE%25B5%25CE%25BA%25CF%2587%25CE%25B1%25CF%2581%25CF%2584%2B%25CF%2584%25CE%25BF%25CE%25BB%25CE%25BB%25CE%25B5%2B%25CF%2580%25CE%25B1%25CE%25BD%25CE%25B4%25CE%25B7%25CE%25BC%25CE%25B9%25CE%25B1%2B2%2B%25282%2529.png" width="200" /></a></div>

Answer 1

Попробуйте добавить этот CSS код в ваш CSS файл:

@media screen and (max-width:767px){
    .mobile-index-title{
        width:100%;
    }

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img{
        max-width:100%;
    }

    .mobile-index-thumbnail{
        float:none;
        text-align:center;
    }
}