Ad

Shopify Website Is Giving White Space On Right Side In Ipad Only

- 1 answer

I'm facing an issue on this website fearofmissingoutfomo.com where there is a white bar on the right side when viewing in iPad. my code is

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;
}

Help will be really appreciated. I also see some related threads but can't relate that to my issue. Thanks.

Ad

Answer

The problem is happenning because of this section: enter image description here

Currently you section has HTML like that

<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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/collections/christmas">
         See more
         </a>
      </div>
   </section>
</div>

You should fix it and add container and row like that:

<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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/collections/christmas">
               See more
               </a>
            </div>
         </div>
      </div>
   </section>
</div>  
Ad
source: stackoverflow.com
Ad