Question

我通过将默认的大图片（2000x1200 px）替换为较小的图片（1914x200 px），并在子主题中使用一些CSS代码，来调整了Wordpress二十七标题的高度。但是我无法解决一些小问题。

在Ubuntu中，使用Chrome和Firefox进行了测试，代码行为是可以接受的，除了标题图像在首页的左侧留有很小的位移。
在Windows中，通过Chrome和IE进行了测试，代码行为也是可以接受的，除了标题图像在首页上具有更高的高度。

有人可以建议我如何解决这些问题吗？

手机屏幕CSS：

/* resize header media for mobile screens */

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
    height: 100px;
    height: 10vh;
}

.has-header-image .custom-header-media:before,
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media:before {
    height: unset;
}

.has-header-image .custom-header-media img {
    position: absolute;
}

/* END resize header media for mobile screens */

计算机屏幕CSS：

/* resize header media for computer screens */

@media screen and (min-width: 48em) {

    .has-header-image.twentyseventeen-front-page .custom-header,
    .has-header-video.twentyseventeen-front-page .custom-header,
    .has-header-image.home.blog .custom-header,
    .has-header-video.home.blog .custom-header {
        height: auto;
    }

    .twentyseventeen-front-page.has-header-image .custom-header-media,
    .twentyseventeen-front-page.has-header-video .custom-header-media,
    .home.blog.has-header-image .custom-header-media,
    .home.blog.has-header-video .custom-header-media {
        height: 250px;
        height: 25vh;
    }

    .has-header-image .custom-header-media img { top: -20%; }

}

/* END resize header media for computer screens */

您可以在这里查看我的网站：psihoterapeut.md

调整Wordpress二十七主题标题的高度

0 个答案: