如何使 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 中，因此您的目标是错误的 class。

你可以阅读更多WP-Beginners and 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 class .right-sidebar

覆盖

谢谢。

Answer 2

将这些代码添加到此文件中：/wp-content/themes/storefront-child-theme-master/style.css

@media (max-width: 66.4989378333em){
.col-full {
    margin-left: 2.617924em;
    margin-right: 2.617924em;
    padding: 0;
    display: flex;
    flex-direction: column;
}
}

@media (max-width: 66.4989378333em){
.right-sidebar .widget-area {
    width: 100%
}
}

@media (max-width: 66.4989378333em){
.right-sidebar .content-area {
    width: 100%
}
}

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

How to make WP sidebar responsive and display at the bottom of page on small screens?

css

wordpress

sidebar

responsive

更新：