1

When I am trying view my web pages on Ipad or Ipad Pro(using google chrome developer tools) the footer is not staying at the bottom at the page. I have no issue whatsoever when viewing on mobile devices/smartphones and desktop.

I have only included the CSS code that concerns the footer.

Can anyone give me a hand with this please?

footer {
  background: #212529;
  color: white;
  bottom: 0;
  
}

footer a {
  color: #fff;
  font-size: 14px;
  transition-duration: 0.2s;
}

footer a:hover {
  color: #ced3d7;
  text-decoration: none;
}

.copy {
  font-size: 12px;
  padding: 10px;
  border-top: 1px solid #FFFFFF;
}

.footer-middle {
  padding-top: 2em;
  color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="assets/css/style.css" type="text/css" />
    <title>Home|The Monkees</title>
</head>
<body>
  <header>
<!--------------------Navigation-->
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark stroke">
      <a class="navbar-brand" href="index.html">
        <img src="assets/image/LOGO.png" id="logo-transparent" alt="logo" style="width:143px;">
      </a>
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
      </button>
    
    <div class="collapse navbar-collapse" id="navbarCollapse">  
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link " id="navbar-select-color" href="index.html">Home</a>
        </li>
        
        <li class="nav-item">
          <a class="nav-link" id="navbar-select-color2" href="photos.html">Photos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="navbar-select-color3" href="video.html">Video</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="navbar-select-color4" href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
    </nav>
  </header>
  <!-- Contact Us Section -->
    <section class="Material-contact-section section-padding section-dark">
      <div class="container">
          <div class="row  ">
              <!-- Section Title -->
              <div class="col-md-12 wow animated fadeInLeft" data-wow-delay=".2s">
                  <h1 class="section-title">Love to Hear From You</h1>
              </div>
          </div>
              <!-- contact form -->
              <div class="col-md-12 wow animated fadeInRight " data-wow-delay=".2s" id="centerForm">
                  <form class="shake" role="form" method="post" id="contactForm" name="contact-form" data-toggle="validator">
                      <!-- Name -->
                      <div class="form-group label-floating">
                        <label class="control-label" for="name">Name</label>
                        <input class="form-control" id="name" type="text" name="name" required data-error="Please enter your name">
                        <div class="help-block with-errors"></div>
                      </div>
                      <!-- email -->
                      <div class="form-group label-floating">
                        <label class="control-label" for="email">Email</label>
                        <input class="form-control" id="email" type="email" name="email" required data-error="Please enter your Email">
                        <div class="help-block with-errors"></div>
                      </div>
                      <!-- Subject -->
                      <div class="form-group label-floating">
                        <label class="control-label">Subject</label>
                        <input class="form-control" id="msg_subject" type="text" name="subject" required data-error="Please enter your message subject">
                        <div class="help-block with-errors"></div>
                      </div>
                      <!-- Message -->
                      <div class="form-group label-floating">
                          <label for="message" class="control-label">Message</label>
                          <textarea class="form-control" rows="3" id="message" name="message" required data-error="Write your message"></textarea>
                          <div class="help-block with-errors"></div>
                      </div>
                      <!-- Form Submit -->
                      <div class="form-submit mt-5">
                          <button class="btn btn-common" type="submit" id="form-submit"><i class="material-icons mdi mdi-message-outline"></i> Send Message</button>
                          <div id="msgSubmit" class="h3 text-center hidden"></div>
                          <div class="clearfix"></div>
                      </div>
                  </form>
              </div>
          </div>
      </div>
    </section>

<footer class="mainfooter bg-dark" role="contentinfo">
  <div class="footer-middle">
      <ul class="social-network social-circle">
             <li><a href="https://www.facebook.com/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
             <li><a href="https://twitter.com/" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
             <li><a href="https://www.youtube.com" class="icoYoutube" title="Youtube"><i class="fa fa-youtube"></i></a></li>
             
      </ul> 
 <div class="col-md-12 copy">
   <p class="text-center">&copy; Copyright 2019 - The Monkees.  All rights reserved. //<a href="about.html"> About </a> //<a href="terms_of_use.html"> Terms of Use </a> //<a href="contact.html"> Contact </a></p>
  
 </div>
  </div>
</footer>
  
</body>
</html>
georgecx
  • 29
  • 4
  • Does this answer your question? There are many methods listed here [CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page](https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b) – Anurag Srivastava Mar 30 '20 at 22:43
  • @AnuragSrivastava I think I need guidance when it comes to this, I have tried multiple methods, that would include using "position: absolute" and the footer ended up being positioned only on half of the page and such. – georgecx Mar 30 '20 at 22:47

4 Answers4

2

Bei adding

position: absolute;
width: 100%;

to your footer it will be on the bottom and 100% width - so your css should look like:

footer {
    position: absolute;
    width: 100%;
    background: #212529;
    color: white;
    bottom: 0;

  }

  footer a {
    color: #fff;
    font-size: 14px;
    transition-duration: 0.2s;
  }

  footer a:hover {
    color: #ced3d7;
    text-decoration: none;
  }

  .copy {
    font-size: 12px;
    padding: 10px;
    border-top: 1px solid #FFFFFF;
  }

  .footer-middle {
    padding-top: 2em;
    color: white;
  }
Scoopex
  • 463
  • 3
  • 11
  • Thanks for the help Scoopex! I have tried that and now it works when I view it for Ipad/Ipad Pro, but I see it in the middle of the screen obscuring the content when I view it on other devices. – georgecx Mar 30 '20 at 22:53
  • after applying @Scoopex method try to zoom out to about 50% using the zoom tab – chukwuemeka aigbokhan Jul 11 '21 at 09:11
1

you had an extra div closing tag just before the closing section tag. Try deleting that and see if that solves the problem. If not, we can try position:absolute

footer {
  background: #212529;
  color: white;
  bottom: 0;
  
}

body{
   height:100%;
   border:solid 1px red;
   }

footer a {
  color: #fff;
  font-size: 14px;
  transition-duration: 0.2s;
}

footer a:hover {
  color: #ced3d7;
  text-decoration: none;
}

.copy {
  font-size: 12px;
  padding: 10px;
  border-top: 1px solid #FFFFFF;
}

.footer-middle {
  padding-top: 2em;
  color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="assets/css/style.css" type="text/css" />
    <title>Home|The Monkees</title>
</head>
<body>
  <header>
<!--------------------Navigation-->
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark stroke">
      <a class="navbar-brand" href="index.html">
        <img src="assets/image/LOGO.png" id="logo-transparent" alt="logo" style="width:143px;">
      </a>
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
      </button>
    
    <div class="collapse navbar-collapse" id="navbarCollapse">  
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link " id="navbar-select-color" href="index.html">Home</a>
        </li>
        
        <li class="nav-item">
          <a class="nav-link" id="navbar-select-color2" href="photos.html">Photos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="navbar-select-color3" href="video.html">Video</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="navbar-select-color4" href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
    </nav>
  </header>
  <!-- Contact Us Section -->
    <section class="Material-contact-section section-padding section-dark">
      <div class="container">
          <div class="row  ">
              <!-- Section Title -->
              <div class="col-md-12 wow animated fadeInLeft" data-wow-delay=".2s">
                  <h1 class="section-title">Love to Hear From You</h1>
              </div>
          </div>
              <!-- contact form -->
              <div class="col-md-12 wow animated fadeInRight " data-wow-delay=".2s" id="centerForm">
                  <form class="shake" role="form" method="post" id="contactForm" name="contact-form" data-toggle="validator">
                      <!-- Name -->
                      <div class="form-group label-floating">
                        <label class="control-label" for="name">Name</label>
                        <input class="form-control" id="name" type="text" name="name" required data-error="Please enter your name">
                        <div class="help-block with-errors"></div>
                      </div>
                      <!-- email -->
                      <div class="form-group label-floating">
                        <label class="control-label" for="email">Email</label>
                        <input class="form-control" id="email" type="email" name="email" required data-error="Please enter your Email">
                        <div class="help-block with-errors"></div>
                      </div>
                      <!-- Subject -->
                      <div class="form-group label-floating">
                        <label class="control-label">Subject</label>
                        <input class="form-control" id="msg_subject" type="text" name="subject" required data-error="Please enter your message subject">
                        <div class="help-block with-errors"></div>
                      </div>
                      <!-- Message -->
                      <div class="form-group label-floating">
                          <label for="message" class="control-label">Message</label>
                          <textarea class="form-control" rows="3" id="message" name="message" required data-error="Write your message"></textarea>
                          <div class="help-block with-errors"></div>
                      </div>
                      <!-- Form Submit -->
                      <div class="form-submit mt-5">
                          <button class="btn btn-common" type="submit" id="form-submit"><i class="material-icons mdi mdi-message-outline"></i> Send Message</button>
                          <div id="msgSubmit" class="h3 text-center hidden"></div>
                          <div class="clearfix"></div>
                      </div>
                  </form>
              </div>
          </div>
     
    </section>

<footer class="mainfooter bg-dark" role="contentinfo">
  <div class="footer-middle">
      <ul class="social-network social-circle">
             <li><a href="https://www.facebook.com/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
             <li><a href="https://twitter.com/" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
             <li><a href="https://www.youtube.com" class="icoYoutube" title="Youtube"><i class="fa fa-youtube"></i></a></li>
             
      </ul> 
 <div class="col-md-12 copy">
   <p class="text-center">&copy; Copyright 2019 - The Monkees.  All rights reserved. //<a href="about.html"> About </a> //<a href="terms_of_use.html"> Terms of Use </a> //<a href="contact.html"> Contact </a></p>
  
 </div>
  </div>
</footer>
  
</body>
</html>
DCR
  • 14,737
  • 12
  • 52
  • 115
  • Thanks for pointing out about the extra
    DCR, I did try position absolute before and the footer stays indeed at the bottom of the screen when viewed on Ipad/Ipad pro, but it's only on half of the screen and when viewed on other devices it shows in the middle of the page obscuring other elements on the page.
     – georgecx Mar 30 '20 at 22:58
  • you may need to use variable font sizes like %,vw,vh among others – DCR Mar 30 '20 at 23:01
0

@DCR This would be the complete CSS code.

@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah:100,200,300,400,500,600,700|Special+Elite:100,200,300,400,500,600,700');
/*---------------------------------Navigation Bar*/

/*----Navbar Buttons*/




.navbar-nav  li  a {
  color: #ffffff !important;
  font-family: "Gloria Hallelujah" , sans-serif;
  text-transform: uppercase;
  font-size: large;
  font-weight: 500;
  text-decoration: none;
  border:none;
  padding: 8px 8px;
  margin:4px 2px;
}

nav li  a,
nav li  a:after,
nav li  a:before {
  transition: all .5s;
}
#navbar-select-color:hover {
  color: #c8c8c8 !important;
}

#navbar-select-color2:hover {
  color: #c8c8c8 !important;
}

#navbar-select-color3:hover {
  color: #c8c8c8 !important;
}

#navbar-select-color4:hover {
  color: #c8c8c8 !important;
}

#logo-transparent {
  opacity: 1.0;
  filter: alpha(opacity=50);
  transition-timing-function: ease-in-out;
  transition: all .5s;
}

#logo-transparent:hover {
  opacity: 0.8;
  filter: alpha(opacity=100);
  transition-timing-function: ease-in-out;
  transition: all .5s;
}
/*----Navbar Animation*/
nav.stroke ul li a {
  position: relative;
}

nav.stroke ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #aaa;
  height: 1px;
}
nav.stroke ul li a:hover:after {
  width:100%;
}

/*---------------------------------Footer*/
footer {
  background: #212529;
  color: white;
  bottom: 0;
  position: absolute;
  
}

footer a {
  color: #fff;
  font-size: 14px;
  transition-duration: 0.2s;
}

footer a:hover {
  color: #ced3d7;
  text-decoration: none;
}

.copy {
  font-size: 12px;
  padding: 10px;
  border-top: 1px solid #FFFFFF;
}

.footer-middle {
  padding-top: 2em;
  color: white;
}


/*---------------------------------Social Icons*/

/* footer social icons */

ul {
  list-style-type: none;
  display: flex;
  justify-content: center;

}

ul .social-network {
  display: inline;
  margin-left: 0 !important;
  padding: 0;
  float: inherit;

}

 ul .social-network li {
  display: inline;
  margin: 0 5px;
  list-style: none;
}


.social-network a.icoTwitter:hover i {
  color: #007bb7;
}
.social-network a.icoFacebook:hover i {
  color: #3B5998;
}

.social-network a.icoYoutube:hover i {
  color: #c4302b;
}


.social-circle li a {
  display: block;
  position: relative;
  margin: 15px 15px 15px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  width: 65px;
  height: 65px;
  font-size:40px;

}

.social-circle li i {
  margin: 0;
  line-height: 30px;
  text-align: center;
}

.social-circle li a:hover i,
.triggeredHover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -ms--transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}

.social-circle i {
  color: #595959;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
  transition: all 0.8s;
}

.social-network a {
  background-color: #F9F9F9;
}

/*---------------------------------Background*/
#div-with-bg {

    background-image: url("https://i.imgur.com/qv5ZwaO.jpg"); 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    
}

#footer {
    position: relative;
    bottom: 0;
    width: 100%;
    margin: 0 auto;
}


.image-box {
  position: relative;
}

.image-box__background,
.image-box__overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.image-box__background {
  background: var(--image-url) center no-repeat;
  background-size: cover;

  z-index: 1
}

.image-box__overlay {
  background: rgba(0, 0, 0, 0.5);

  z-index: 2;
}

.image-box__content {
  position: relative;

  z-index: 3;

  /* Finally, style and place the content */
  color: white;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

html{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: cover;
}

body, html {
  height: 100%;
  
}

img {
  width:100%;
  height: auto;
  position: relative;

}

#bg {

  /* Full height */
  height: 100%;


  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  position: relative;

}

/*---------------------------------Text*/

.band_biography {
    margin-left: auto;
    margin-right: 30%;
    margin-top: 10%;
    width: 20em;
    color: white;
    background: rgba(0, 0, 0, 0.6);

}

.bio_image {
  border-radius: 50%;
  max-width:15%;
  margin-top: 12%;
  margin-left: 32%;
  background-size: contain;
  float: left;
  background: rgba(0, 0, 0, 0.6);
}

/*---------------------------------Contact Form*/

.section-padding {
    padding: 45px 0;
}

.form-submit {
background: #B9DFFF;

color: #fff;

border: 1px solid #eee;

border-radius: 20px;

box-shadow: 5px 5px 5px #eee;

text-shadow:none;

width: 35%;

position: relative;

margin-left: 35%;

text-align: center;

}

.form-submit:hover {

background: #016ABC;

color: #fff;

border: 1px solid #eee;

border-radius: 20px;

width: 35%;
box-shadow: 5px 5px 5px #eee;

text-shadow:none;

}

.section-dark {
    background-color: #f9f9f9;
    z-index: -2;
}
.form-control,
.form-group .form-control {
    border: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#009688), to(#009688)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));
    background-image: -webkit-linear-gradient(#009688, #009688), -webkit-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: -o-linear-gradient(#009688, #009688), -o-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
    -webkit-background-size: 0 2px, 100% 1px;
    background-size: 0 2px, 100% 1px;
    background-repeat: no-repeat;
    background-position: center bottom, center -webkit-calc(100% - 1px);
    background-position: center bottom, center calc(100% - 1px);
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition: background 0s ease-out;
    -o-transition: background 0s ease-out;
    transition: background 0s ease-out;
    float: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0
}

.form-control::-moz-placeholder,
.form-group .form-control::-moz-placeholder {
    color: #BDBDBD;
    font-weight: 400
}

.form-control:-ms-input-placeholder,
.form-group .form-control:-ms-input-placeholder {
    color: #BDBDBD;
    font-weight: 400
}

.form-control::-webkit-input-placeholder,
.form-group .form-control::-webkit-input-placeholder {
    color: #BDBDBD;
    font-weight: 400
}

.form-control[disabled],
.form-control[readonly],
.form-group .form-control[disabled],
.form-group .form-control[readonly],
fieldset[disabled] .form-control,
fieldset[disabled] .form-group .form-control {
    background-color: rgba(0, 0, 0, 0)
}

.form-control[disabled],
.form-group .form-control[disabled],
fieldset[disabled] .form-control,
fieldset[disabled] .form-group .form-control {
    background-image: none;
    border-bottom: 1px dotted #D2D2D2
}

.form-group {
    position: relative
}

.form-group.label-floating label.control-label,
.form-group.label-placeholder label.control-label,
.form-group.label-static label.control-label {
    position: absolute;
    pointer-events: none;
    -webkit-transition: .3s ease all;
    -o-transition: .3s ease all;
    transition: .3s ease all
}

.form-group.label-floating label.control-label {
    will-change: left, top, contents
}

.form-group.label-placeholder:not(.is-empty) label.control-label {
    display: none
}

.form-group .help-block {
    position: absolute;
    display: none
}

.form-group.is-focused .form-control {
    outline: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#009688), to(#009688)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));
    background-image: -webkit-linear-gradient(#009688, #009688), -webkit-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: -o-linear-gradient(#009688, #009688), -o-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
    -webkit-background-size: 100% 2px, 100% 1px;
    background-size: 100% 2px, 100% 1px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s
}

.form-group.is-focused .form-control .material-input:after {
    background-color: #009688
}

.form-group.is-focused label,
.form-group.is-focused label.control-label {
    color: #009688
}

.form-group.is-focused.label-placeholder label,
.form-group.is-focused.label-placeholder label.control-label {
    color: #BDBDBD
}

.form-group.is-focused .help-block {
    display: block
}

.form-group.has-warning .form-control {
    -webkit-box-shadow: none;
    box-shadow: none
}

.form-group.has-warning.is-focused .form-control {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ff5722), to(#ff5722)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));
    background-image: -webkit-linear-gradient(#ff5722, #ff5722), -webkit-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: -o-linear-gradient(#ff5722, #ff5722), -o-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#D2D2D2, #D2D2D2)
}

.form-group.has-warning .help-block,
.form-group.has-warning label.control-label {
    color: #ff5722
}

.form-group.has-error .form-control {
    -webkit-box-shadow: none;
    box-shadow: none
}

.form-group.has-error .help-block,
.form-group.has-error label.control-label {
    color: #f44336
}

.form-group.has-success .form-control {
    -webkit-box-shadow: none;
    box-shadow: none
}

.form-group.has-success.is-focused .form-control {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#4caf50), to(#4caf50)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));
    background-image: -webkit-linear-gradient(#4caf50, #4caf50), -webkit-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: -o-linear-gradient(#4caf50, #4caf50), -o-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2)
}

.form-group.has-success .help-block,
.form-group.has-success label.control-label {
    color: #4caf50
}

.form-group.has-info .form-control {
    -webkit-box-shadow: none;
    box-shadow: none
}

.form-group.has-info.is-focused .form-control {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#03a9f4), to(#03a9f4)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));
    background-image: -webkit-linear-gradient(#03a9f4, #03a9f4), -webkit-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: -o-linear-gradient(#03a9f4, #03a9f4), -o-linear-gradient(#D2D2D2, #D2D2D2);
    background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#D2D2D2, #D2D2D2)
}

.form-group.has-info .help-block,
.form-group.has-info label.control-label {
    color: #03a9f4
}

.form-group textarea {
    resize: none
}

.form-group textarea~.form-control-highlight {
    margin-top: -11px
}

.form-group select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.form-group select~.material-input:after {
    display: none
}

.form-control {
    margin-bottom: 7px
}

.form-control::-moz-placeholder {
    font-size: 16px;
    line-height: 1.42857143;
    color: #BDBDBD;
    font-weight: 400
}

.form-control:-ms-input-placeholder {
    font-size: 16px;
    line-height: 1.42857143;
    color: #BDBDBD;
    font-weight: 400
}

.form-control::-webkit-input-placeholder {
    font-size: 16px;
    line-height: 1.42857143;
    color: #BDBDBD;
    font-weight: 400
}
.checkbox label,
.radio label,
label {
    font-size: 16px;
    line-height: 1.42857143;
    color: #BDBDBD;
    font-weight: 400
}

label.control-label {
    font-size: 12px;
    line-height: 1.07142857;
    font-weight: 400;
    margin: 16px 0 0 0
}

.help-block {
    margin-top: 0;
    font-size: 12px
}

.form-group {
    padding-bottom: 7px;
    margin: 28px 0 0 0
}

.form-group .form-control {
    margin-bottom: 7px
}

.form-group .form-control::-moz-placeholder {
    font-size: 16px;
    line-height: 1.42857143;
    color: #BDBDBD;
    font-weight: 400
}

.form-group .form-control:-ms-input-placeholder {
    font-size: 16px;
    line-height: 1.42857143;
    color: #BDBDBD;
    font-weight: 400
}

.form-group .form-control::-webkit-input-placeholder {
    font-size: 16px;
    line-height: 1.42857143;
    color: #BDBDBD;
    font-weight: 400
}

.form-group .checkbox label,
.form-group .radio label,
.form-group label {
    font-size: 16px;
    line-height: 1.42857143;
    color: #BDBDBD;
    font-weight: 400
}

.form-group label.control-label {
    font-size: 12px;
    line-height: 1.07142857;
    font-weight: 400;
    margin: 16px 0 0 0
}

.form-group .help-block {
    margin-top: 0;
    font-size: 12px
}

.form-group.label-floating label.control-label,
.form-group.label-placeholder label.control-label {
    top: -7px;
    font-size: 16px;
    line-height: 1.42857143
}

.form-group.label-floating.is-focused label.control-label,
.form-group.label-floating:not(.is-empty) label.control-label,
.form-group.label-static label.control-label {
    top: -30px;
    left: 0;
    font-size: 12px;
    line-height: 1.07142857
}

.form-group.label-floating input.form-control:-webkit-autofill~label.control-label label.control-label {
    top: -30px;
    left: 0;
    font-size: 12px;
    line-height: 1.07142857
}

.form-group.form-group-sm {
    padding-bottom: 3px;
    margin: 21px 0 0 0
}

.form-group.form-group-sm .form-control {
    margin-bottom: 3px
}

.form-group.form-group-sm .form-control::-moz-placeholder {
    font-size: 11px;
    line-height: 1.5;
    color: #BDBDBD;
    font-weight: 400
}

.form-group.form-group-sm .form-control:-ms-input-placeholder {
    font-size: 11px;
    line-height: 1.5;
    color: #BDBDBD;
    font-weight: 400
}

.form-group.form-group-sm .form-control::-webkit-input-placeholder {
    font-size: 11px;
    line-height: 1.5;
    color: #BDBDBD;
    font-weight: 400
}

.form-group.form-group-sm .checkbox label,
.form-group.form-group-sm .radio label,
.form-group.form-group-sm label {
    font-size: 11px;
    line-height: 1.5;
    color: #BDBDBD;
    font-weight: 400
}

.form-group.form-group-sm label.control-label {
    font-size: 9px;
    line-height: 1.125;
    font-weight: 400;
    margin: 16px 0 0 0
}

.form-group.form-group-sm .help-block {
    margin-top: 0;
    font-size: 9px
}

.form-group.form-group-sm.label-floating label.control-label,
.form-group.form-group-sm.label-placeholder label.control-label {
    top: -11px;
    font-size: 11px;
    line-height: 1.5
}

.form-group.form-group-sm.label-floating.is-focused label.control-label,
.form-group.form-group-sm.label-floating:not(.is-empty) label.control-label,
.form-group.form-group-sm.label-static label.control-label {
    top: -25px;
    left: 0;
    font-size: 9px;
    line-height: 1.125
}

.form-group.form-group-sm.label-floating input.form-control:-webkit-autofill~label.control-label label.control-label {
    top: -25px;
    left: 0;
    font-size: 9px;
    line-height: 1.125
}

.form-group.form-group-lg {
    padding-bottom: 9px;
    margin: 30px 0 0 0
}

.form-group.form-group-lg .form-control {
    margin-bottom: 9px
}

.form-group.form-group-lg .form-control::-moz-placeholder {
    font-size: 18px;
    line-height: 1.3333333;
    color: #BDBDBD;
    font-weight: 400
}

.form-group.form-group-lg .form-control:-ms-input-placeholder {
    font-size: 18px;
    line-height: 1.3333333;
    color: #BDBDBD;
    font-weight: 400
}

.form-group.form-group-lg .form-control::-webkit-input-placeholder {
    font-size: 18px;
    line-height: 1.3333333;
    color: #BDBDBD;
    font-weight: 400
}

.form-group.form-group-lg .checkbox label,
.form-group.form-group-lg .radio label,
.form-group.form-group-lg label {
    font-size: 18px;
    line-height: 1.3333333;
    color: #BDBDBD;
    font-weight: 400
}

.form-group.form-group-lg label.control-label {
    font-size: 14px;
    line-height: .99999998;
    font-weight: 400;
    margin: 16px 0 0 0
}

.form-group.form-group-lg .help-block {
    margin-top: 0;
    font-size: 14px
}

.form-group.form-group-lg.label-floating label.control-label,
.form-group.form-group-lg.label-placeholder label.control-label {
    top: -5px;
    font-size: 18px;
    line-height: 1.3333333
}

.form-group.form-group-lg.label-floating.is-focused label.control-label,
.form-group.form-group-lg.label-floating:not(.is-empty) label.control-label,
.form-group.form-group-lg.label-static label.control-label {
    top: -32px;
    left: 0;
    font-size: 14px;
    line-height: .99999998
}

.form-group.form-group-lg.label-floating input.form-control:-webkit-autofill~label.control-label label.control-label {
    top: -32px;
    left: 0;
    font-size: 14px;
    line-height: .99999998
}

select.form-control {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0
}

.form-group.is-focused select.form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #D2D2D2
}

.form-group.is-focused select.form-control[multiple],
select.form-control[multiple] {
    height: 85px
}

.input-group-btn .btn {
    margin: 0 0 7px 0
}

.form-group.form-group-sm .input-group-btn .btn {
    margin: 0 0 3px 0
}

.form-group.form-group-lg .input-group-btn .btn {
    margin: 0 0 9px 0
}

.input-group .input-group-btn {
    padding: 0 12px
}

.input-group .input-group-addon {
    border: 0;
    background: 0 0
}

.form-group input[type=file] {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100
}


#contactForm {
    margin-top: 100px
    
}

#contactForm .form-group label.control-label {
    color: #8c8c8c
}

#contactForm .form-control {
    font-weight: 500;
    height: auto
    
}

.row {
  display: block;
  text-align: center;
  padding-top: 10%;
}

#centerForm {
  text-align: center;
}

.container{
    padding-bottom: 0%;
}

/*---------------------------------Biography*/



.box{
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    padding: 40px;
    text-align: center;
    color: white;
    font-family: 'Century Gothic' ,sans-serif;
    padding-bottom: 10%;
    padding-top: 5%;
}

.box-img{
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

.box h1{
    font-size: 40px;
    letter-spacing: 4px;
    font-weight: 100;
    
}

.box h5{
    font-size: 25px;
    letter-spacing: 3px;
    font-weight: 100;
}

.box p{
    text-align: justify;
    
}

/*---------------------------------Photo Grid*/

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/*---------------------------------Media Queries*/


/* ----------- iPad Pro 10.5" ----------- */

@media only screen 
  and (min-width: 834px) 
  and (max-width: 1112px)
  and (-webkit-min-pixel-ratio: 2) {
  .container {
      padding-bottom: 22%;
      
  }
  .row {
      padding-top: 20% !important;
  }
}



/* ----------- iPad Pro 12.9" ----------- */

@media only screen 
  and (min-width: 1024px) 
  and (max-width: 1366px)
  and (-webkit-min-pixel-ratio: 2) {
.container {
      padding-bottom: 22%;
      
  }
  .row {
      padding-top: 20% !important;
  }
}

/* ----------- Blackberry Playbook ----------- */
@media (max-width: 600px) and (orientation: portrait) {
    .row {
      padding-top: 15%;
  }
 }
 
@media only screen 
  and (min-width: 834px) 
  and (max-width: 1112px)
  and (-webkit-min-pixel-ratio: 2) {
  .container {
      padding-bottom: 22%;
      
  }
  .row {
      padding-top: 20% !important;
  }
}

/* ----------- Photo Gallery ----------- */

img{
    width:100%;
}    

.gallery a {
 position: relative;
 display: block;
}

.overlay {
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 100px;
    height: 100%;
 width: 100%;
    padding-top:40px;
    top: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    transition: all 1s ease;
}

.overlay2{
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 100px;
    height: 100%;
 width: 100%;
    padding-top:100px;
    top: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    transition: all 1s ease;
}

.gallery a:hover .overlay ,
.gallery a:hover .overlay2 {
    opacity: 0.8;
}

.img-space{
    margin:20px 0px;
}

/*---------Video Gallery--------*/
georgecx
  • 29
  • 4
0

After all I have managed to find a resolution by myself.

I will post what I did here, just in case someone runs into this issue.

Blockquote

The solution will depend a little on the rest of your CSS page. It can take some trial and error to find the one that works for you. I went for the calc() method.

You wrap all your content in a new div with a class name of "content" on it. Making sure to close this div right before the footer is opened.

Then you use devtools to find out the height of your footer, and use the calc() method to give the the .content class a minimum hieght that is equal to 100% of the view height minius the height of the footer.

.content { min-height: calc(100vh - /* height of footer here */); }

georgecx
  • 29
  • 4