CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Derek Joseph
Derek Joseph

Reputation: 59

Scrolls past footer

I can't figure out what is causing the problem but in mobile view you can scroll past the footer.
I have tried to change several things but I can't understand why it's happening.

I have added my code below and a screen shot. Thanks for looking.

enter image description here enter image description here

     <!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=""> <link rel="shortcut icon" href"icon.png" >
     <title>PAT DECORATORS &#38; CO</title>

     <!-- Bootstrap Core CSS -->
     <link href="css/bootstrap.min.css" rel="stylesheet">

     <!-- Custom CSS -->
     <link href="css/portfolio-item.css" rel="stylesheet">

     <!-- 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]-->

     <!-- Bootstrap Core JavaScript -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css"
 rel="stylesheet">
     <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
     <script src="photo-gallery.js"></script>
            <link href="css/portfolio-item.css" rel="stylesheet">  <style>

     body {
     padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation
 changes. */
     background-color: #D8D2C4; /*    background: linear-gradient(#CCCC00, #B7B700,#D8D2C4);*/
     font-family: Tahoma, Geneva, sans-serif; }


      .navbar-inverse .navbar-nav > li > a:hover{   background-color: #20A6E3;   color: #fff; }

 .navbar-inverse {   border: none; }

 .navbar-inverse .navbar-brand {
     color: #fff; }

 .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav
 > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav >
 .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {  
 background-color: #20A6E3;   color: #fff; }


 .resize {
     width: 45px;
     height: 45px }

 .resize2 {
     width: 75px;
     height: 45px }

   </style>    



      </head>

 <body>

     <!-- Navigation -->
     <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
         <div class="container">
             <!-- Brand and toggle get grouped for better mobile display -->
             <div class="navbar-header">
                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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" href="#"> <!--                    <span><img src="icon.png" class="resize"/></span>-->
                     PAT DECORATORS </a>
             </div>

             <!-- Collect the nav links, forms, and other content for toggling -->
             <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
                 <ul class="nav navbar-nav">
                      <li>
                         <a href="index.html">Home</a>
                     </li>                   
                     <li>
                         <a href="about.html">About</a>
                     </li>
                     <li>
                         <a href="services.html">Services</a>
                     </li>
                    <li class="active">
                         <a href="gallery.html">Gallery</a>
                     </li>
                                         <li>
                         <a href="testimonials.html">Testimonials</a>
                     </li>
                     <li>
                         <a href="contact.html">Contact</a>
                     </li>
                 </ul>
             </div>
             <!-- /.navbar-collapse -->
         </div>
         <!-- /.container -->
     </nav>

     <!-- Page Content -->
     <div class="container">


         <!-- Portfolio Item Heading -->
         <div class="row ">
             <div class="col-lg-12">
                 <h1 class="page-header section2">  
                     <span><img src="gallery.png" class="resize2"/></span><font>Gallery
                     <small><font color="#000"></font></small>
                 </h1>
             </div>
         </div>         <!--gallery-->      <div class="container">

         <div id="gall">
         <ul class="row">
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="car_painting.png">
             </li>
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/car_painting2.png">
             </li>
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/car_painting8.jpg">
             </li>
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/painting5.jpg">
             </li>
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/font_painting6.jpg">
             </li>
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/painting7.jpg">
             </li>
      <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/painting91.jpg">
             </li>
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/varnishing.PNG">
             </li>
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/painting4.jpg">
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/painting31.jpg">
             </li>

              <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/painting10.png">
             </li>              


           </ul> 


         </div><!--end of gal -->

         <!-- Footer -->
         <footer class="footer2 footer">
             <div class="row">
                 <div class="col-lg-12">
                    <p>Designed by <a href="http://wonderfulwebsites.ie" target="_blank"> Wonderful
 Websites.ie</p></a> 
                 </div>
             </div>
             <!-- /.row -->
         </footer>

     </div>     </div><!--end of container -->


     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content">         
           <div class="modal-body">                
           </div>
         </div><!-- /.modal-content -->
       </div><!-- /.modal-dialog -->
     </div><!-- /.modal -->


     <!-- jQuery -->
     <script src="js/jquery.js"></script>

     <!-- Bootstrap Core JavaScript -->
     <script src="js/bootstrap.min.js"></script>
                <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script
 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>



 </body>

 </html>

Upvotes: 1

Views: 274

Answers (1)

Rob Quincey
Rob Quincey

Reputation: 2896

There were a few errors in your HTML to begin with. 

<h1 class="page-header section2">  
    <span><img src="gallery.png" class="resize2"/></span>
    <font>Gallery<small><font color="#000"></font></small>
</h1>

Theres a font tag here that hasn't been closed properly. There's also a small tag whose purpose eludes me at the moment. My advice, just get rid of them.

<h1 class="page-header section2">  
    <span><img src="gallery.png" class="resize2"/></span>
    Gallery
</h1>

Next

<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
    <img class="img-responsive" src="gallery/varnishing.PNG">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
    <img class="img-responsive" src="gallery/painting4.jpg">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
    <img class="img-responsive" src="gallery/painting31.jpg">
</li>

You're missing a closing li tag here. Easy fix, put it back in!

<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
    <img class="img-responsive" src="gallery/varnishing.PNG">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
    <img class="img-responsive" src="gallery/painting4.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
    <img class="img-responsive" src="gallery/painting31.jpg">
</li>

That's all I could find there. I wasn't getting the error in the Bootply I made, so here it is - http://www.bootply.com/7tmqQmPapS - Obviously I am missing the linked CSS and JS at the top of your file, specifically these;

 <script src="photo-gallery.js"></script>
 <link href="css/portfolio-item.css" rel="stylesheet">

So it could be an error in one of those that's causing your issue. Try adding them to my Bootply above and see what happens. If you get any further update your question and let me know, then I can update the answer if new information comes to light.

Upvotes: 1

Related Questions