Whitespace between main and footer

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Whitespace between main and footer

iliketheinterwebs pro asked 6 years ago

I have whitespace/gap between my main and footer sections and I am not sure why. I don't want the whitespace. TIA for your help.   
Start your code here
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Permitting for PMNM</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- Your custom styles (optional) --> <link href="css/front-page.css" rel="stylesheet"> </head> <!-- Start your project here--> <body> <!-- Main navigation --> <header> <!--Navbar--> <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar"> <div class="container"> <a class="navbar-brand" href="#"> <strong>PMNM Permitting</strong> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent-7"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">FAQ</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav> <!-- Navbar --> <!-- Full Page Intro --> <div class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url('https://mdbcdn.b-cdn.net/img/sea-turtle.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;"> <!-- Mask & flexbox options--> <div class="mask rgba-black-strong d-flex justify-content-center align-items-center"> <!-- Content --> <div class="container"> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-md-12 white-text text-center"> <h1 class="display-3 mb-0 pt-md-5 pt-5 white-text wow fadeInDown" data-wow-delay="0.3s">Papahānaumokuākea <a class="white-text">Permitting</a> </h1> <h5 class="text-uppercase pt-md-5 pt-sm-2 pt-5 pb-md-5 pb-sm-3 pb-5 white-text wow fadeInDown" data-wow-delay="0.3s">Create, submit, and track your permits, all in one place.</h5> <div class="wow fadeInDown" data-wow-delay="0.3s"> <a class="btn blue-gradient btn-lg">Log In</a> <a class="btn peach-gradient btn-lg">Sign Up</a> </div> </div> <!--Grid column--> </div> <!--Grid row--> </div> <!-- Content --> </div> <!-- Mask & flexbox options--> </div> <!-- Full Page Intro --> </header> <!-- Footer --> <footer class="page-footer font-small stylish-color-dark pt-4 mt-4"> <!-- Footer Links --> <div class="container text-center text-md-left"> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-4 mx-auto"> <!-- Content --> <h5 class="font-weight-bold text-uppercase mt-3 mb-4">About Papahānaumokuākea Online Permitting</h5> <p>This online permitting system allows you to apply to conduct activities within Papahānaumokuākea Marine National Monument. </p> </br> <p>Once your application is completed using this online permitting system, you will be able to manage your applications, obtain status updates, and subsequently report on your permitting activities.</p> </div> <!-- Grid column --> <hr class="clearfix w-100 d-md-none"> <!-- Grid column --> <div class="col-md-2 mx-auto"> <!-- Links --> <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Instructions</h5> <ul class="list-unstyled"> <li> <a href="#!">Link 1</a> </li> <li> <a href="#!">Link 2</a> </li> <li> <a href="#!">Link 3</a> </li> <li> <a href="#!">Link 4</a> </li> </ul> </div> <!-- Grid column --> <hr class="clearfix w-100 d-md-none"> <!-- Grid column --> <div class="col-md-2 mx-auto"> <!-- Links --> <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Permit Deadlines</h5> <ul class="list-unstyled"> <li> <a href="#!">Link 1</a> </li> <li> <a href="#!">Link 2</a> </li> <li> <a href="#!">Link 3</a> </li> <li> <a href="#!">Link 4</a> </li> </ul> </div> <!-- Grid column --> <hr class="clearfix w-100 d-md-none"> <!-- Grid column --> <div class="col-md-2 mx-auto"> <!-- Links --> <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Contact Us</h5> <ul class="list-unstyled"> <li> <a href="#!">Link 1</a> </li> <li> <a href="#!">Link 2</a> </li> <li> <a href="#!">Link 3</a> </li> <li> <a href="#!">Link 4</a> </li> </ul> </div> <!-- Grid column --> </div> <!-- Grid row --> </div> <!-- Footer Links --> <hr> <!-- Call to action --> <ul class="list-unstyled list-inline text-center py-2"> <li class="list-inline-item"> <h5 class="mb-1">Create an account for free</h5> </li> <li class="list-inline-item"> <a href="#!" class="btn peach-gradient btn-lg">Sign up</a> </li> </ul> <!-- Call to action --> <hr> <!-- Social buttons --> <ul class="list-unstyled list-inline text-center"> <li class="list-inline-item"> <a class="btn-floating btn-fb mx-1"> <i class="fa fa-facebook"> </i> </a> </li> <li class="list-inline-item"> <a class="btn-floating btn-tw mx-1"> <i class="fa fa-twitter"> </i> </a> </li> </ul> <!-- Social buttons --> <!-- Copyright --> <div class="footer-copyright text-center py-3">© 2017 Copyright: <a href="https://papahanaumokuakea.gov"> Papahānaumokuākea Marine National Monument</a> </div> <!-- Copyright --> </footer> <!-- Footer --> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> <script> // Animations initialization new WOW().init(); </script> </body> </html>

Bartłomiej Malanowski staff pro premium commented 6 years ago

Could you please attach a screenshot of this whitespace?

lede pro premium answered 6 years ago

You have the class "mt-4" in your footer...that adds the white space

iliketheinterwebs pro commented 6 years ago

Thank you so much lede!
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
About author
iliketheinterwebs
Pro User
7Support score
16Questions 0Answers
0Snippets likes 0Snippets