css - 如何使用模块内的自定义 css 在移动设备上居中 divi 模块 html 文章标签

Question

我正在使用我在网上找到的自定义 divi 模块，不幸的是它不像我希望的那样动态支持移动设备。在桌面上它看起来应该：

但是，在移动设备上，项目不会堆叠，用户必须向右滚动才能看到它们。

在 wordpress 上使用 Divi 我尝试将以下内容添加到模块设置中的自定义 css 部分。

@media only screen and (max-width:800px) 
{   
    .et_pb_post{
        display: block; 
                float: none; 
                width: 100%;
    }
}

这是去掉了一些标签<a>的html 。<image>

<div class="et_pb_ajax_pagination_container">
    <article id="post-13643" class="et_pb_post clearfix post-13643 post type-post status-publish format-standard has-post-thumbnail hentry category-barrier-free category-shower"></article>
    <article id="post-13634" class="et_pb_post clearfix post-13634 post type-post status-publish format-standard has-post-thumbnail hentry category-barrier-free category-shower"></article>
    <article id="post-13629" class="et_pb_post clearfix post-13629 post type-post status-publish format-standard has-post-thumbnail hentry category-barrier-free category-shower"></article>
</div>

我希望文章标签垂直对齐并堆叠，但似乎没有任何改变。

Answer 1

找到了解决方案：

我不得不改变 flex-direction: row; 在我的媒体查询中列。