在 WordPress 中使用 Divi 主题的响应式侧边栏

Posted 2023-03-06

【中文标题】在 WordPress 中使用 Divi 主题的响应式侧边栏

【英文标题】：Responsive Sidebar Using Divi Theme in WordPress

【发布时间】：2016-04-12 05:23:44

【问题描述】：

我正在尝试使用 Divi 主题在我的 WordPress 网站中隐藏移动设备的侧边栏。我曾尝试使用媒体查询来做到这一点，但它没有奏效。

我的媒体查询：

@media (max-width:480px) 
    .menu-decoglobofx-container 
        display:none;
    

我也尝试了插件Hide Widgets，当我在移动设备try it yourself and see 上测试页面时，侧边栏仍然显示。有谁知道如何让它正常工作？

【参考方案1】：

在 css 中更改：

   @media (max-width: 479px)
.et_pb_section .et_pb_row .et_pb_column.et_pb_column_1_4 
    width: 100% !important;
    margin: 0 0 30px 0;

与：

 @media (max-width: 479px)
.et_pb_section .et_pb_row .et_pb_column.et_pb_column_1_4 
    width: 100% !important;
    margin: 0 0 30px 0;
    display:none;

【讨论】：

我试过了，但它仍然显示。我还在名为 .barrita 的 divi 部分中添加了一个类，并且添加了此代码，但看起来没有任何效果 @media (max-width: 479px) .barrita width: 100% !important;边距：0 0 30px 0；显示：无；

你是在.et_pb_section .et_pb_row .et_pb_column.et_pb_column_1_4 课堂上添加的吗？

是的，我把你刚才给我的媒体查询复制到了我的子主题的style.css中

【参考方案2】：

这应该很好..只需使用正确的 page_id 就可以了

   @media all and (max-width: 479px) 
    .et_pb_sidebar_0 
    display:none !important;
    

【讨论】：

这不是正确的做法@hector-de-prada。如果你想有一个可折叠的移动侧边栏，你需要使用 JS。这是一个 Codepen 示例，说明如何使用媒体查询和 jQuery toggleClass：codepen.io/staypuftman/pen/dGOMYO