Маржа Shopify выталкивает баннер со стороны

У меня очень неприятная проблема в 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----->
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
65
1

Ответы 1

Измените ширину '100vw на 100%' в своем коде, это будет работать

.bannerheadercontainer { width: 100%;}

Другие вопросы по теме