在移動設備上查看時，頁面右側如何出現白色空白？

Question

我正在使用Foundation 5完成我自己的公司網站，直到我開始添加從數據庫中提取的投資組合和定價部分時，它才正確顯示在移動電話上。當我將這些部分關閉時，所有內容都正確居中。我在iphone 6 plus上測試它。任何幫助，將不勝感激。

這裏是鏈接：http://www.overtheoceanfilms.com/beta/index.php

Answer 1

看起來定價表的嵌套是問題的原因。

您當前的價格表結構如下：

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

如果每個價格表的直接兄弟是row包含的價格表。這會導致右側出現額外的空白區域。

你想應該是結構：

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

凡中存在的每個價格表單row：

HTML結構應該像下面的：

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

你可以用上述內容替換您的定價表以解決您的問題。如果您仍然遇到問題，請發表評論。