css - 如何使 WP 侧边栏具有响应性并在小屏幕上显示在页面底部？

Question

我发现以下 CSS 代码已粘贴到子主题的 CSS 样式表中，但它不起作用。

/* Mobiles in Potrait mode */
@media only screen 
and (max-width : 320px) {
    .widget-area {
        float: left;
        width: 100%;
        background: #E3E3E3;
    }
}

/* Mobiles in landscape mode */
@media only screen 
and (min-width : 321px) 
and (max-width : 480px) {
    .widget-area {
            float: left;
            width: 100%;
            background: #E3E3E3;
    }
}

你可以查看我的WP website

Answer 1

.widget-area 默认情况下包含在 .sidebar-container 中，因此您定位的是错误的类。

您可以阅读更多 WP-Beginners和 WP-Codex

更新:

根据您网站的 HTML，您需要:

.right-sidebar .content-area {
    width: 100%;
    float: left;
    margin-right: 5%;
}

.right-sidebar .widget-area {
    float: left;
    width: 100%;
    background: #E3E3E3;
}

你添加的样式被body类.right-sidebar覆盖了

谢谢。