ios - 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>