html - Shopify margin 将横幅推到一边

Question

我在 Shopify 中遇到了一个非常烦人的问题。我的横幅广告工作正常，但突然出现了这个名为“行”的类，并将我的横幅广告推到了移动设备和桌面设备的一边。我无法让我的横幅广告正常工作，我检查了我的整个代码，看看我是否有任何错误，但我没有，我试图寻找一个可能会搞砸一切的“.row”，但它唯一的僵局 .row 和我觉得我不应该搞砸那件事，因为我不确定它的作用。无论如何，感谢您的宝贵时间!

非常感谢任何帮助!

Problem
What I see as the issue

CSS

.bannerheadercontainer {
    width: 100vw;
    position: relative;
    top: 0px;
    left: calc(-50vw + 50%);
    display: table;
    padding: 0px;
    margin: 0px;
}
.bannercontainer {
    position: relative;
    width: 100%;
}
.bannercontainer .btnstyle {
    font-weight: bold;
    position: absolute;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-appearance: none;
    color: white;
    font-size: 15px;
    font-size: 4vw;
    border: none;
    border-radius: 0px! important;
    height: 16%;
    text-align: center;
    line-height: 0vw;
    cursor: pointer;
}
.bannercontainer .imgstyle {
    position: absolute;
}
.bannercontainer .btnstyle span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}
.bannercontainer .btnstyle span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}
.bannercontainer .btnstyle:hover span {
    padding-right: 25px;
}
.bannercontainer .btnstyle:hover span:after {
    opacity: 1;
    right: 0;
}
.bannercontainer .btnstyleDesktop {
    position: absolute;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-appearance: none;
    color: white;
    font-weight: bold;
    font-size: 8px;
    font-size: 1.5vw;
    border: none;
    border-radius: 0px! important;
    height: 12%;
    text-align: center;
    line-height: 0vw;
    cursor: pointer;
}
.bannercontainer .btnstyleDesktop span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}
.bannercontainer .btnstyleDesktop span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}
.bannercontainer .btnstyleDesktop:hover span {
    padding-right: 25px;
}
.bannercontainer .btnstyleDesktop:hover span:after {
    opacity: 1;
    right: 0;
}

.bannerimg {
   filter: brightness(30%);
}
/*------ CSS MOBILE ONLY -----*/

@media only screen and (max-width: 599px) {
  .bannerheadercontainer {
    top: -10px;

}


    .pagetitle {
        font-size: 18px !important;
    }
    .overlaybanner {
        top: -1px;
        height: 98%;
    }
    .index-banner {
        height: 300px !important;
        background-size: 200% 100%;
        background-repeat: no-repeat;
    }
    .styc-container {
        width: 100%;
    }
    .index-gray-section-style {
        background-color: #F9F9F9;
        min-height: 390px;
        width: 100%;
    }
    .index-gray-section-connected {
        background-color: #F9F9F9;
        min-height: 390px;
        width: 100%;
    }
    }

HTML代码

    <!----START BANNER----->
<div id="content-desktop">
<div class="bannerheadercontainer">
<img style="width: 100%;" class="bannerimg" src="https://cdn.shopify.com/s/files/1/0025/8719/7497/files/ecobanner-compressor_2048x2048.png?v=1529095445">
<div class="overlayheaderbanner"></div>
<div class="pagetitle">ECO-FRIENDLY</div>
</div>
</div>
<div id="content-mobile">
<div class="bannerheadercontainer">
<img style="width: 100%;" class="bannerimg" src="https://cdn.shopify.com/s/files/1/0025/8719/7497/files/eco-compressor_large.png?v=1529427950">
<div style="top: 0px; height: 97%;" class="overlayheaderbanner"></div>
<div class="pagetitle">ECO-FRIENDLY</div>
</div>
</div>
<!----END BANNER----->

Answer 1

在您的代码中将宽度“100vw 更改为 100%”，它将起作用

.bannerheadercontainer { width: 100%;}