Question posted in 
I have an issue with my landing page based on Bootstrap. On laptop everything looks fine, however when I minimize window sections start overlap with each other although I have used <div class="col-lg-12">. I would expect that when I resize it to small (mobile) size it should set section one below other, however content from top section is covering bottom section.
Here’s the code (GitHub Gist link):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Brand Landing Page</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href = "css/styles.css" rel = "stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Social Media <b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a href = "#">Twitter</a></li>
<li><a href = "#">Facebook</a></li>
<li><a href = "#">Google+</a></li>
<li><a href = "#">Instagram</a></li>
</ul>
</li>
<li><a href = "#contact-form" data-toggle="modal" >Contact us!</a></li>
</ul>
.
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Carousel -->
<div id="myCarousel" class = "carousel slide">
<ol class = "carousel-indicators">
<li data-target="#myCarousel" data-slide-to= "0" class = "active"></li>
<li data-target="#myCarousel" data-slide-to= "1"></li>
<li data-target="#myCarousel" data-slide-to= "2"></li>
</ol>
<div class="carousel-inner">
<div class = "item active">
<img src= "img/carousel1.png" alt="first file" class ="img-responsive">
<div class ="carousel-caption">
<h1> Image 1 </h1>
<p class="text-justify "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non. Vivamus pellentesque semper ante, ut convallis nunc dapibus ut. Proin et molestie lectus, at lacinia ligula. Phasellus interdum scelerisque orci non commodo.</p>
</div>
</div>
<div class = "item">
<img src= "img/carousel2.png" alt="second file" class ="img-responsive">
<div class ="carousel-caption">
<h1> Image 2 </h1>
<p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non. Vivamus pellentesque semper ante, ut convallis nunc dapibus ut. Proin et molestie lectus, at lacinia ligula. Phasellus interdum scelerisque orci non commodo.</p>
</div>
</div>
<div class = "item">
<img src= "img/carousel3.png" alt="third file" class ="img-responsive">
<div class ="carousel-caption">
<h1> Image 3</h1>
<p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non. Vivamus pellentesque semper ante, ut convallis nunc dapibus ut. Proin et molestie lectus, at lacinia ligula. Phasellus interdum scelerisque orci non commodo.</p>
</div>
</div>
</div>
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">
<span class = "icon-prev"></span>
</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">
<span class = "icon-next"></span>
</a>
</div><br><br><br>
<p> <a class="btn btn-default page-scroll" href="#about">Click Me to Scroll Down!</a></p>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<h1>About Section</h1>
<hr class="section-heading-spacer">
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<div class="clearfix"></div>
<h2 class="section-heading">Wher we are:</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet.</p>
</div>
<div class="col-lg-3 col-lg-offset-3 col-sm-3">
<img class="img-responsive " src="img/ipad.png" alt="" >
</div>
</div>
<hr class="section-heading-spacer">
<hr class="section-heading-spacer">
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6">
<div class="clearfix"></div>
<h2 class="section-heading">What we do:</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet!</p>
</div>
<div class="col-lg-3 col-sm-pull-4 col-sm-4">
<img class="img-responsive" src="img/dog.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
<hr class="section-heading-spacer">
<a class="btn btn-default page-scroll" href="#services">Click Me to Scroll Down!</a>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<h1>Services</h1>
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/service1.jpg" alt="">
</a>
<h3>
<a href="#">Service 1</a>
</h3>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non.</p>
<a class = "navbar-btn btn-primary btn page-scroll pull-center" href="#">Read more!</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/service2.jpg" alt="">
</a>
<h3>
<a href="#">Service 2</a>
</h3>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non.</p>
<a class = "navbar-btn btn-primary btn page-scroll pull-center" href="#">Read more!</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/service3.jpg" alt="">
</a>
<h3>
<a href="#">Service 3</a>
</h3>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non.</p>
<a class = "navbar-btn btn-primary btn page-scroll pull-center" href="#">Read more!</a>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<ol style="visibility:hidden;">
<li> </li>
</ol>
<a class="btn btn-default page-scroll" href="#contact">Click Me to Scroll Down!</a>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Section</h1>
<form class="form-horizontal">
<div class = "modal-header">
<h4>Leave us message. We will respond in 24h.</h4>
</div>
<div class = "modal-body">
<div class="form-group">
<label for = "contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-8">
<input type ="text" class = "form-control" id ="contact-name" placeholder ="Full Name">
</div>
</div>
<div class="form-group">
<label for = "contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-8">
<input type ="email" class = "form-control" id ="contact-email" placeholder ="[email protected]">
</div>
</div>
<div class="form-group">
<label for = "contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-8">
<textarea class = "form-control" rows ="8" ></textarea>
</div>
</div>
</div>
<div class = "modal-footer">
<div class="col-lg-7">
<a class = "btn btn-primary" type = "submit">Submit</a>
<a class = "btn btn-danger" data-dismiss = "modal">Close</a>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="banner">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>We are social:</h2>
</div>
<div class="col-lg-6">
<ul class="list-inline banner-social-buttons">
<li>
<a href="https://twitter.com/BrandFlowNet" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
<li>
<a href="#" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li>
<a href="https://www.linkedin.com/company/9390236" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
</ul>
</div>
</div>
</div>
<!-- /.container -->
</div>
</section>
<div class = "navbar navbar-default navbar-fixed-bottom" id="footer">
<div class = "container">
<p class = "navbar-text pull-left">Site Built by BrandFlow.net</p>
<a class = "navbar-btn btn-danger btn page-scroll pull-right" href="#page-top">To the sky!</a>
</div>
</div>
<div class = "modal fade" id = "contact-form" role = "dialog">
<div class = "modal-dialog">
<div class = "modal-content">
<form class="form-horizontal">
<div class = "modal-header">
<h4>Contact Tech Site</h4>
</div>
<div class = "modal-body">
<div class="form-group">
<label for = "contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type ="text" class = "form-control" id ="contact-name" placeholder ="Full Name">
</div>
</div>
<div class="form-group">
<label for = "contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type ="email" class = "form-control" id ="contact-email" placeholder ="[email protected]">
</div>
</div>
<div class="form-group">
<label for = "contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class = "form-control" rows ="8" ></textarea>
</div>
</div>
</div>
<div class = "modal-footer">
<a class = "btn btn-primary" type = "submit">Submit</a>
<a class = "btn btn-danger" data-dismiss = "modal">Close</a>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
</body>
</html>
Live preview:
http://brandflow.net/products/bootstrap/flowlandingpage/index.html
2
Answers
I used Skelly recomenndation and found answer in comments.
I replaced height: 100% with min-height: 100% and it worked like a charm!
}
You added,
height:100%on some elements which caused issues on lower res..services-section {
height: 100%;padding-top: 50px;
text-align: center;
background: #fff;
}
and
.contact-section {
height: 100%;padding-top: 50px;
text-align: center;
background: #eee;
}