Shopify 网站仅在 Ipad 的右侧提供空白区域

Question

我在这个网站fearofmissingoutfomo.com 上遇到了一个问题，在 iPad 中查看时右侧有一个白条。 我的代码是

html,body { 
margin: 0; 
padding: 0;
border: 0;
@include smooth_font();}
{% if settings.use_bg_image %}
body {
background: {{settings.shop_bg_color}} url({{ 'bg.png' | asset_url }}) 0 0 no-repeat;
}
body.index-template {
 background: {{settings.shop_bg_color}} url({{ 'bg.png' | asset_url }}) 0 0 no-repeat;
padding-top: 40px;
padding-bottom: 40px;
}

我们将不胜感激。我也看到了一些相关的线程，但无法将其与我的问题联系起来。谢谢。

Answer 1

由于此部分，问题正在发生：

目前你的部分有这样的 HTML

<div id="shopify-section-1509186783462" class="shopify-section  index-section products-grid">
   <section data-section-id="1509186783462" data-section-type="products">
      <div class="section-header text-center">
         <h2>View our featured christmas items</h2>
      </div>
      <div class="grid grid--uniform grid--view-items">
         ......
      </div>
      <div class="text-center view-more btn">
         <a href="/collections/christmas">
         See more
         </a>
      </div>
   </section>
</div>

你应该修复它并像这样添加container和row：

<div id="shopify-section-1509186783462" class="shopify-section  index-section products-grid">
   <section data-section-id="1509186783462" data-section-type="products">
      <div class="container">
         <div class="row">
            <div class="section-header text-center">
               <h2>View our featured christmas items</h2>
            </div>
            <div class="grid grid--uniform grid--view-items">
               ......
            </div>
            <div class="text-center view-more btn">
               <a href="/collections/christmas">
               See more
               </a>
            </div>
         </div>
      </div>
   </section>
</div>