Увеличение ширины баннера на мобильном магазине

Question

Я создал шаблон страницы для страницы, используя баннер + 2 продукта.

Проблема на мобильном телефоне, где я не могу сделать баннер шире. Он остается с некоторым полем влево и вправо, что делает изображение неподходящим для пользователя xp.

Я пытался использовать js, чтобы сделать его принудительно более широким, но при этом оставалось поле. Я даже сделал функцию, чтобы получить ширину области просмотра и установить баннер в px, без результатов. Кто-нибудь может дать мне немного света?

Классы, представленные ниже, сделаны создателем темы.

Раздел баннера:

<section  class="parallax-banner parallax-slide slide parallax_effect--{{ section.settings.parallax_effect }}" id="slide-{{ section.id }}">
  <div id="bannerImg" class="bcg {% if section.settings.image == nil %}bcg-placeholder{% endif %}"
      {% if section.settings.parallax_effect %}
        style="background-image:url({% if section.settings.image != nil %}{{ section.settings.image | img_url: '1600x' }}{% else %}{{ 'placeholder.svg' | asset_url }}{% endif %})"
        data-bottom-top="background-position: 50% 200px;"
        data-top-bottom="background-position: 50% -200px;"
        data-anchor-target="#slide-{{ section.id }}"
      {% endif %}
      >
      {% if section.settings.link != blank and section.settings.button_label == blank %}
        <a href="{{ section.settings.link }}" class="full-link">
          {{ section.settings.link }}
        </a>
      {% endif %}
      <div class="hsContainer">
        <img src="{% if section.settings.image != nil %}{{ section.settings.image | img_url: '1600x' }}{% else %}{{ 'placeholder.svg' | asset_url }}{% endif %}" alt="{{ section.settings.image.alt | escape }}" class="hsContainer__image">
        <div class="hsContent">
          <div class="container">
            <div class="columns {% if section.settings.text_position == 'left' %} eight offset-by-one {% elsif section.settings.text_position == 'right' %} eight offset-by-eight {% else %} sixteen {% endif %} align_{{ section.settings.text_alignment }}">
              <div class="{{ section.settings.headline_animation }}">
                {% if section.settings.title != blank %}
... (unecessary code not pasted)

Код шаблона страницы:

<div class="container main content main-wrapper">

  <div class="sixteen columns page clearfix">

    <div>
      {% include 'page-multi-column', content: page.content %}
        {% section 'aniversariante-img-overlay' %} 
       {% section 'aniversariante-promocoes' %} 
    </div>
  </div>
</div>

<script>
  var size = getViewportSize().w;
  console.log(size);

 document.getElementsByClassName("hsContainer")[0].style.width = size+"px !important";
 document.getElementsByClassName("hsContainer")[0].style = "margin: 0";

  function getViewportSize(w) {

    // Use the specified window or the current window if no argument
    w = w || window;

    // This works for all browsers except IE8 and before
    if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };

    // For IE (or any browser) in Standards mode
    var d = w.document;
    if (document.compatMode == "CSS1Compat")
        return { w: d.documentElement.clientWidth,
           h: d.documentElement.clientHeight };

    // For browsers in Quirks mode
    return { w: d.body.clientWidth, h: d.body.clientHeight };

}
</script> 

Расположение страницы в реальном времени: https://clubeporcao.com.br/pages/aniversariante

Я уже пробовал:

• удаление классов с результатом, но срыв страницы
• удаление заполнения класса контейнера, без результата
• установка ширины в% и px
• установка поля в 0
• попадание в chrome проверка элемента и попытка найти место установки отступа / поля

Answer 1

Hacky решение:

#slide-aniversariante-img-overlay {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

Объяснение:

Вы хотите сделать дочерний элемент вашего .container (который имеет фиксированную ширину) шире, чем этот контейнер. Вы знаете ширину .container для выбранной точки останова, но вы не можете сказать, сколько места доступно слева и справа.

Вы можете проверить это с помощью JavaScript, как вы уже пробовали, но затем вы вынуждены добавить прослушиватель событий после изменения размера (потому что эти значения будут меняться).

Выше я установил дочернюю ширину равной 100vw (100% ширины области просмотра), поэтому она имеет правильную ширину но мы не знаем значение поля, которое мы должны использовать.

Мы, вероятно, могли бы использовать margin-left: calc( 100vw / 2 - Xpx);, где X - ширина .container, но вместо этого я добавил положение relative и переместил это скользить к средней ширине left: 50% - это 50% родительского элемента (если вы выключите transform, вы увидите, что слайд начинается точно в середине окна). transform: translateX(-50%) установит слайд в нужном месте, потому что он работает на ширине дочернего элемента, а не на родительском.

Внимание: для некоторых вариантов масштабирования может появиться горизонтальная прокрутка, вы можете обернуть баннер в отдельный раздел с помощью overflow: hidden; (но если бы вы могли это сделать, вы, вероятно, удалили бы .container уже) или добавили overflow-x: hidden; к телу.