У меня очень неприятная проблема в Shopify. Мои баннеры работали нормально, но внезапно появился класс под названием «строка», который отодвигает мой баннер в сторону как на мобильном устройстве, так и на компьютере. Я не могу заставить свои баннеры работать правильно, я просмотрел весь свой код, чтобы увидеть, есть ли у меня какие-либо ошибки, а у меня нет, я попытался найти ".row", который мог бы испортить все, кроме его единственного тупика .row и это то, с чем я не думаю, что должен возиться, поскольку я не уверен, что это делает. В любом случае, спасибо за уделенное время!
Любая помощь приветствуется!
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----->






Измените ширину '100vw на 100%' в своем коде, это будет работать
.bannerheadercontainer { width: 100%;}