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

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