Question

我正在从头开始制作Twenty Fifteen的儿童主题。我在使用CSS自定义blockquote的外观方面遇到了问题。

我为子主题中的blockquotes做了一些自定义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;

这显示正常。问题是在较小的屏幕（特别是移动分辨率）上，blockquote css不适用，即母亲主题的css＆＃34;而是显示。我似乎无法找出原因。

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;
}

@media screen and（min-width：18.75em）不需要你可以删除。

Wordpress二十五岁儿童主题blockquote

1 个答案: