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

覆盖

谢谢。

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边栏响应并显示在小屏幕页面的底部？

2 个答案:

更新：