【问题标题】:Responsive Sidebar Using Divi Theme in WordPress在 WordPress 中使用 Divi 主题的响应式侧边栏
【发布时间】:2016-04-12 05:23:44
【问题描述】:

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

我的媒体查询:

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

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

【问题讨论】:

    标签: android css wordpress mobile media-queries


    【解决方案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 toggleClasscodepen.io/staypuftman/pen/dGOMYO
    猜你喜欢
    • 2014-02-07
    • 2016-12-23
    • 2014-09-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-15
    相关资源
    最近更新 更多