增加移動 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斷點的.container的寬度，但您無法確定左側和右側有多少可用空間。

您可以像已經嘗試過的那樣使用 JavaScript 檢查它，但是在調整大小后您被迫添加一個事件偵聽器（因為這些值會改變）。

上面我已經將子寬度設置為 100vw（視口寬度的 100%） - 所以它有一個正確的寬度，但我們不知道我們應該使用的邊距值。

我們可能可以使用margin-left: calc( 100vw / 2 - Xpx); 其中 X 是.container的寬度，但相反，我添加了relative位置並將此幻燈片移動到left: 50%中間寬度left: 50% - 它是父元素的 50%（如果關閉transform您將看到幻燈片正好從窗口中間開始）。 transform: translateX(-50%)會將幻燈片設置在正確的位置，因為它適用於孩子的寬度而不是父母的寬度。

注意：對於某些縮放選項，可能會出現水平滾動，您可以將橫幅包裝在一個單獨的部分中， overflow: hidden; （但如果你能做到這一點，你可能已經刪除了.container ）或添加overflow-x: hidden; 到身體。