增加移动 shopify 上的横幅宽度

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

黑客解决方案：

#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; 添加到正文中。