Как сделать так, чтобы тема выглядела на скриншоте?

Question

Мой сайт: https://www.gameron.pl/

Мне нужно сделать тему как на скриншоте для разрешения 719px и ниже:

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

Вот что работает:

@media (max-width:719px){

    /* Thumbnail Image */
    .main a .wp-post-image{
        width:50%;
    }
}

Теперь мне просто нужно правильно переместить и настроить заголовок сообщения. У кого-нибудь есть идеи, как мне это сделать? Я чувствую, что попробовал все.

Answer 1

Вы можете сделать это следующим образом:

@media only screen and (max-width: 719px) {
    .main .post-list .post-thumbnail,
    .main .post-list .post-content {
        float: left;
        width: 49%;
    }

    .main .post-thumbnail {
        margin-right: 0.5em;
    }
}

Результат

Answer 2

Проблема в том, что у вашего .post-thumbnail есть float:none, а у вашего .post-content есть float:left.

Я изменил его в консоли, поэтому float:left и width:50%, и он работает нормально:

https://i.imgur.com/Q8BFev0.png

@media only screen and (max-width: 719px) {
    .post-list .post-thumbnail {
        float: left;
        max-width: 50%;
    }
    .post-list .post-content {
        float:left;
        width: 50%;
    }
}