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

【问题标题】：How to make WP sidebar responsive and display at the bottom of page on small screens?如何使 WP 侧边栏响应并在小屏幕上显示在页面底部？
【发布时间】：2019-08-15 05:09:41
【问题描述】：

我发现以下 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

【问题讨论】：

标签： css wordpress responsive sidebar

【解决方案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覆盖

谢谢。

【讨论】：

不幸的是，我的店面主题中没有这样的类。你可以在mexon.ca 上查看我的网站，看看 .widget-area 应该可以工作。感谢您的帮助
成功了，谢谢。我在我的每个移动纵向和横向模式代码块下方复制了这两个代码块的副本。

【解决方案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%
}
}

【讨论】：