Макет, который я сделал, должен быть виден на экранах мобильных устройств. В настоящее время, когда я уменьшаю масштаб до мобильного устройства или просматриваю сайт на своем iPhone 5, элементы div с более длинным текстом просто перемещаются повсюду.
Поскольку я оборачиваю все в div, которые я называю section0, section1 и т. д. и т. д., я думал, что установка высоты для них поможет, но это не помогает. Фон меняется, но текст, который переполняется, остается на месте. В разделах есть контейнеры страниц, но установка высоты для них тоже не помогает.
Я немного не в курсе, так как эта проблема возникает только с тремя нижними div.
Мои разделы построены так;
<div class="section" id="section3">
<div class="row">
<div class="col-lg-6 werkwijze">
<h1>Lorem Psum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<h1>Lorem Psum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div>
</div> <!-- end col -->
</div> <!-- end row -->
<div class="row">
<div class="col-lg-5 botlogo">
<div class="left"><img src="css/images/logo4.png"></div><div class="right"><h3>LOREM IPSUM</h3><h4>dolor sit amet</h4></div>
</div><!-- end col -->
</div> <!-- end row -->
</div> <!-- end sec -->
И я использую эти стили для разделов;
.page_container {
height:100% !important;
display:block;
}
#section3{
background: none;
border-bottom: 2px solid #8f8f8f;
height:100%;
}
Есть 6 разделов (0-5), и он начинает идти не так в разделе 3.
Я попытался добавить скрипку, но по какой-то причине я не могу воссоздать проблему и не могу поделиться исходным сайтом. http://jsfiddle.net/MgcDU/ Я надеюсь, что кто-то признает эту проблему и может мне помочь.
