如何使主题看起来像屏幕截图？

Question

我的网站：https://www.gameron.pl/

我需要像屏幕截图中那样使主题分辨率为719px及以下：

我的意思是课程列表。我尝试使用各种代码来实现它，但是每个代码只能在一种分辨率下工作，而不能适应其他分辨率。

这是有效的方法：

@media (max-width:719px){

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

现在，我只需要适当地移动和调整帖子标题即可。有谁知道我该怎么办？我觉得我尝试了一切。

Answer 1

问题是您的.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%;
    }
}

Answer 2

您可以执行以下操作：

@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;
    }
}

结果