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 inspect元素，并尝试查找在何处设置填充/边距

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;到身体。

在移动shopify上增加横幅宽度

1 个答案: