Как выглядит белый зазор на правой стороне страницы при просмотре на мобильном устройстве?

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> 

Вы можете замените свою таблицу цен выше, чтобы исправить свои проблемы. Если вы все еще испытываете проблемы, прокомментируйте.