CODEWITHSUNDEEP
mobilezurb-foundationcentering
Mike
Mike

Reputation: 173

How come there is a white gap on the right side of the page when viewing on a mobile device?

I'm finishing up my own companies website using Foundation 5 and it was displaying correctly on a mobile phone up until I started adding the portfolio and pricing sections that are being pulled from a database. When I take those sections off, everything is centered properly. I'm testing it on a iphone 6 plus. Any help would be appreciated.

Here is the link: http://www.overtheoceanfilms.com/beta/index.php

Upvotes: 1

Views: 56

Answers (1)

Yass
Yass

Reputation: 2668

It looks like the nesting of the pricing tables is the cause of the issue.

Your current pricing table structure looks like this:

row //row 1
--medium-3 //pricing table
--row //row 2
----medium-3 //pricing table
--row 
row

Where the direct sibling of each pricing table is a row that contains a pricing table. This is causing the additional white space on the right.

The structure you want should be:

row
--medium-3
--medium-3
--medium-3
--medium-3
row

Where each pricing table exists within a single row:

The html structure should look like the below:

<div class="row">
  <div class="large-3 columns">
    <ul class="pricing-table">
      <li class="title-Silver ">Silver Package
      </li>
      <li class="price"> $1600 </li>

      <li class="bullet-item"> 2 videographers </li>
      <li class="bullet-item"> Full Ceremony </li>
      <li class="bullet-item"> Full Reception </li>
      <li class="bullet-item"> 1 full length DVD with custom case </li>
      <li class="bullet-item"> Professional audio recording </li>

      <input type="hidden" value="Silver" name="Silver">
      <li class="cta-button"><a class="button" href="#">Contact Us!</a></li>
    </ul>
  </div>
  <div class="large-3 columns">
    <ul class="pricing-table">
      <li class="title-Gold ">Gold Package
      </li>
      <li class="price"> $2250 </li>

      <li class="bullet-item"> 2 Videographers </li>
      <li class="bullet-item"> Bride &amp; Groom Morning Preperation </li>
      <li class="bullet-item"> Full Ceremony &amp; Reception </li>
      <li class="bullet-item"> Filming of photoshoot </li>
      <li class="bullet-item"> Highlight Video </li>
      <li class="bullet-item"> 3 custom made DVD's </li>
      <li class="bullet-item"> Professional audio recording </li>

      <input type="hidden" value="Gold" name="Gold">
      <li class="cta-button"><a class="button" href="#">Contact Us!</a></li>
    </ul>
  </div>

  <div class="large-3 columns">
    <ul class="pricing-table">
      <li class="title-Diamond ">Diamond
        <span style="position:absolute; margin-left:-80px; top:-27px;">  <img src="images/BestValue.png" style="height:60px; width:60px"> </span> Package
      </li>
      <li class="price"> $2500 </li>

      <li class="bullet-item"> Includes Gold Package </li>
      <li class="bullet-item"> Stabilization Add-On </li>
      <li class="bullet-item"> Free 2 LED lights with stands during reception dancing </li>

      <input type="hidden" value="Diamond" name="Diamond">
      <li class="cta-button"><a class="button" href="#">Contact Us!</a></li>
    </ul>
  </div>

  <div class="large-3 columns">
    <ul class="pricing-table">
      <li class="title-Platinum ">Platinum Package
      </li>
      <li class="price"> $3000 </li>

      <li class="bullet-item"> Includes Diamond Package </li>
      <li class="bullet-item"> 3 videographers </li>
      <li class="bullet-item"> Interview with couple </li>
      <li class="bullet-item"> First look reveal (if applicable) </li>
      <li class="bullet-item"> Wish Cam during reception </li>

      <input type="hidden" value="Platinum" name="Platinum">
      <li class="cta-button"><a class="button" href="#">Contact Us!</a></li>
    </ul>
  </div>
</div>

You can replace your pricing table with the above to fix your issues. If you're still experiencing issues, please comment.

Upvotes: 1

Related Questions