I got a problem with sections. The text inside of section, overflows it. I don't understand this because, normally, when you disable autoScrolling, data is wrapped by the section. I downloaded fullpage demo and filled it with loads of text. Section wraps the text. My code is:
Html:
<div class="jumbotron about-section section" id="section1">
<p>lorem ipsum ...
</p>
</div>
Css:
.about-section{
background: url(../img/text_bg_sm.png);
background-size: cover;
background-repeat: no-repeat;
font-family: ProximaNovaLight;
font-size: 20px;
padding-top: 90px;
}
.about-section p span{
font-family: ProximaNovaRegular;
}
JS:
<script src="js/jquery-2.1.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script>
$(document).ready(function(){
if( $(window).width() > 900 ){
$('#fullpage').fullpage({
autoScrolling: true,
menu: "#menu",
css3: true,
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
responsive: 900,
resize: false
});
} else {
$('#fullpage').fullpage({
autoScrolling: false,
menu: "#menu",
css3: true,
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
responsive: 900,
verticalCentered: true,
resize: false
});
}
});
</script>
Tried to turn off jumbotron
, bootstrap at all, leave only section
class.
Result remains the same.
This is what i mean : My case: At this picture you can see how text flows out from section with dark background to section with white background.
How creator of fullpage.js plugin do this : I created 20 "Keep it simple" signs and the final section stretched to it's content height. (Responsive demo)