在CSS中移动元素

Question

我的网站首页显示的1920px屏幕（大桌面屏幕）与1366px（15英寸笔记本电脑）屏幕不同。

在较大的屏幕上，这是完美的选择，但是在较小的屏幕上，菜单，下面的文本以及横幅图像之间有很大的空间。

我正在尝试通过将1366像素的屏幕包装在媒体查询中来解决此问题（尽管这很奇怪，我必须这样做。这是整个网站上唯一出现不同显示的内容）

问题是，在媒体查询中，我已将文本上移，但是我无法使横幅图像上移，而所有文本都不会再次下移。我试图做负填充和负顶边距，但是它不起作用。有人可以帮我上移横幅广告图像吗？或更好，请解释一下为什么在此屏幕分辨率下效果有所不同。该网站是www.flowersforeveryone.co.za ..尽管显然取决于您的分辨率，您可能会或可能不会看到该问题。我已附上图片。

CSS是-

@media (min-width: 1300px) and (max-width: 1400px) {

.page-banner-wrap .page-banner > .container{
    margin-top: -100px;
    margin-bottom: 0px;
}

.page-banner-wrap .page-banner .page-header > .page-title{
    font-family: 'Source Sans Pro', sans-serif !important;
    margin-top: -100px;
    font-weight: 300;
    margin: 0 auto;
    max-width: 590px;
    font-size: 21pt;
    line-height: 1.2;
    word-wrap:break-word; max-width:38ch;
}

.page-banner-wrap .page-banner .banner-content{
    margin-top: 20px;
    margin-bottom: 0px;
}

#lsx-banner .tagline {
    font-size: 16pt;
    color: #000;
    font-weight: 300;
    text-transform: uppercase;
    padding-bottom: 20px;
}
.page-banner-wrap .page-banner > .page-banner-image{
    position: relative;
    height: 100vh;
    width: 100%;
    margin-bottom: 20px;
}
}

Answer 1

还有一些其他大错误应该首先解决：D但是nvm。

在

内部进行更改

<div class="page-banner-image" style="background-position: center center; background-image:url(https://flowersforeveryone.co.za/wp-content/uploads/2018/08/Home-3-1.png);"></div>

背景位置

background-position: top center;

但是如果您继续使用这些CSS，可能还会发生其他一些问题，我建议使用

background-size: contain

而不是您在那里所做的。所以看起来像

background-size: contain;
background-position: top center;
background-size: contain;
width: 100%;
height: 100%;
background-image: url(https://flowersforeveryone.co.za/wp-content/uploads/2018/08/Home-3-1.png);