Question

我在Shopify中遇到一个非常烦人的问题。我的横幅广告效果很好，但突然出现了名为“行”的此类，将我的横幅广告推到了移动设备和台式机的侧面。我无法使横幅正常工作，浏览了整个代码，看是否有任何错误，而我没有，我试图寻找一个“ .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%;}

Shopify保证金将横幅推开

1 个答案: