Question

我的网站横幅突然出现在我的标题文本上方，而不是下方。我已经将CSS固定在桌面版本上，但无法在手机上正确安装。（这是wordpress，文本已添加为横幅标题和标语）

有人可以告诉我代码是什么。

该网站为www.flowersforeveryone.co.za

@media (max-width: 475px){
    .page-banner-wrap .page-banner .page-header > .page-title{
        font-size: 14pt;
        line-height: 1.2;
}

#lsx-banner .tagline{
font-size: 9pt;

}

.page-banner-wrap .page-banner > .page-banner-image{
    height: 30vh;
position: relative;
}

Answer 1

类似下面的CSS之类的东西应该可以解决问题。我不知道为什么会这样。我假设DOM标记已更改，因此横幅不再正确显示。您可能需要调整以下设置。这只是从哪里开始的提示。我使横幅广告非常吸引人，但仍有改进的空间。我调整了背景的位置（在较小的屏幕设备上更改了大小-720px / 768px断点），并在特定的屏幕尺寸（<= 991px）上将图像容器拉伸到100％。

.page-banner-wrap .page-banner > .container {
    margin-top: 20px;
}  

.page-banner-wrap .page-banner > .page-banner-image {
    background-position: 50% 65% !important;
}    

@media only screen and (max-width: 991px)
.page-banner-wrap .page-banner > .page-banner-image {
    height: 100%;
    position: absolute;
}

@media (max-width: 768px)
.page-banner-wrap .page-banner > .page-banner-image {
    background-size: 350px;
}

@media (max-width: 720px)
.page-id-10 .page-banner-wrap .page-banner > .page-banner-image {
    background-size: 300px;
}

编辑：将容器边距更改为顶部可能也是在桌面上更具吸引力的好主意。

如何将网站标题移至横幅图像上方

1 个答案: