Wordpress Twenty-15th儿童主题重磅报价

Question

我正在从头开始为《十五岁》制作一个儿童主题。我在使用CSS自定义块引号的外观时遇到了问题。

我为子主题中的块引号制作了一些自定义css：

border-left: 4px solid #f1f1f1;
    border-left: 4px solid rgba(31, 31, 31, 1);
    border-style: inset;
    color: #0099cc;
    font-size: 18px;
    font-size: 1.8rem;
    font-style: italic;
    line-height: 1.6667;
    margin-bottom: 1.6667em;
    padding-left: 0.7778em;
    padding-top: 0.7778em;
    padding-bottom: 0.7778em;
    padding-right: 0.7778em;
    margin-left: 0px;
    background-color: #1f1f1f;
    border-color: #cc0099;

这显示良好。问题是，在较小的屏幕上(尤其是移动分辨率(，块引号css不适用，即显示"母亲主题"的css。我似乎不知道为什么。

Answer 1

看看你的父主题，他们使用几个媒体查询来改变不同屏幕设备大小的外观。十五主题有几个媒体查询：

    /**
     * 16.1 Mobile Large 620px
     */
    @media screen and (min-width: 38.75em) {

    }
    /**
     * 16.2 Tablet Small 740px
     */
    @media screen and (min-width: 46.25em) {

    }
    /**
     * 16.3 Tablet Large 880px
     */
    @media screen and (min-width: 55em) {

    }
and so on.....

在您的子主题上，使用所需的值覆盖它。。

@media screen and (min-width: 38.75em) {
    blockquote {
      --- my value here ---
    }
}
other media screen queries..

----------------更新------------------

尝试将此添加到您的儿童主题

@media screen and (min-width: 55em) {
    blockquote {
    font-size: 20px;
    font-size: 2rem;
    border-style: inset;
    color: #0099cc;
    border-left: 4px solid #f1f1f1;
    border-left: 4px solid rgba(31, 31, 31, 1);
    background-color: #1f1f1f;
    border-color: #cc0099;
    }
}

@media screen and (min-width: 46.25em) {
blockquote {
    font-size: 18px;
    font-size: 1.8rem;
    border-style: inset;
    color: #0099cc;
    border-left: 4px solid #f1f1f1;
    border-left: 4px solid rgba(31, 31, 31, 1);
    background-color: #1f1f1f;
    border-color: #cc0099;
    }
}
blockquote {
    padding-right: 0.7778em;
    border-style: inset;
    color: #0099cc;
    border-left: 4px solid #f1f1f1;
    border-left: 4px solid rgba(31, 31, 31, 1);
    background-color: #1f1f1f;
    border-color: #cc0099;
}

@媒体屏幕和(最小宽度：18.75em(不需要您可以删除。