增加移动 shopify 上的横幅宽度

Question

我为一个页面创建了一个页面模板，使用横幅 + 2 个产品。

问题出在移动设备上，我无法将横幅设置得更宽。它左右留有一定的边距，使图像不适合用户 xp。

我试过用js强行加宽，但还是保留了边距。我什至做了一个函数来获取视口宽度并将横幅以像素为单位设置给它，但没有结果。谁能给我一些启发？

下面的 class 是主题创建者预制的。

横幅部分：

<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

我已经试过了：

删除 classes，结果，但破坏了页面
正在删除容器 class 填充，没有结果
将宽度设置为 % 和 px
将保证金设置为 0
进入 chrome 检查元素并尝试找到设置 padding/margin 的位置

Answer 1

Hacky 解决方案：

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

解释：

您想使 .container（具有固定宽度）的 child 元素比此容器宽。您知道所选断点的 .container 宽度，但无法判断左侧和右侧有多少 space。

您可以像您已经尝试过的那样用 JavaScript 检查它，但是在调整大小后您必须添加一个事件侦听器（因为这些值会改变）。

上面我已将 child 宽度设置为 100vw（视口宽度的 100%）- 因此它具有正确的宽度，但我们不知道我们应该使用的边距值。

我们可能可以使用 margin-left: calc( 100vw / 2 - Xpx);，其中 X 是 .container 的宽度，但我添加了位置 relative 并将此幻灯片移动到中间宽度 left: 50% - 它是 parent 元素的 50%（如果您关闭 transform，您将看到幻灯片恰好从 window 的中间开始）。 transform: translateX(-50%) 将在正确的位置设置幻灯片，因为它适用于 child 的宽度而不是 parent 的宽度。

注意：对于某些缩放选项，可以出现水平滚动，您可以使用 overflow: hidden; 将横幅包装在单独的部分中（但如果可以这样做，您可能已经删除 .container）或添加 overflow-x: hidden;到 body.

增加移动 shopify 上的横幅宽度

Increase banner width on mobile shopify

css

liquid

shopify