Bootstrap overlapping sections -
i have issue landing page based on bootstrap. on laptop looks fine, when minimize window sections start overlap each other although have used <div class="col-lg-12">. expect when resize small (mobile) size should set section 1 below other, content top section covering bottom section.
here's 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 , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view 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> <!-- #page-top id part of scrolling feature - data-spy , data-target part of 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 nav links, forms, , other content toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <!-- hidden li included remove active class link when scrolled past 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 remove active class link when scrolled past 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 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, @ gravida lacus lobortis non. vivamus pellentesque semper ante, ut convallis nunc dapibus ut. proin et molestie lectus, @ 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 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, @ gravida lacus lobortis non. vivamus pellentesque semper ante, ut convallis nunc dapibus ut. proin et molestie lectus, @ 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 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, @ gravida lacus lobortis non. vivamus pellentesque semper ante, ut convallis nunc dapibus ut. proin et molestie lectus, @ 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 scroll down!</a></p> </div> </div> </div> </section> <!-- 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 are:</h2> <p class="lead">lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam sem augue, sollicitudin sed ultricies ac, elementum 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 do:</h2> <p class="lead">lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam sem augue, sollicitudin sed ultricies ac, elementum 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 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 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, @ 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 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, @ 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 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, @ 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 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 message. respond in 24h.</h4> </div> <div class = "modal-body"> <div class="form-group"> <label = "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 = "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 ="you@example.com"> </div> </div> <div class="form-group"> <label = "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 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 brandflow.net</p> <a class = "navbar-btn btn-danger btn page-scroll pull-right" href="#page-top">to 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 = "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 = "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 ="you@example.com"> </div> </div> <div class="form-group"> <label = "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
i used skelly recomenndation , found answer in comments.
i replaced height: 100% min-height: 100% , worked charm!
.about-section { min-height: 100%; padding-top: 50px; text-align: center; background: #eee; }
Comments
Post a Comment