时间戳

首页 > 解决方案 > 如何将网站标题移动到横幅图片上方

html - 如何将网站标题移动到横幅图片上方

问题描述

我的网站横幅突然出现在我的标题文本上方，而不是下方。我已经在桌面版本上修复了 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;
}

标签： htmlwordpress

解决方案

下面的 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;
}

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

推荐阅读