CODEWITHSUNDEEP
htmlcssmedia-queriessticky-footer
almonty67
almonty67

Reputation: 11

Trying to Apply A Sticky Footer with Mobile First Approach

I am trying to apply a sticky footer but at the 769px media query it is breaking (won't stay at the bottom of the page). I am using Mobile-First Approach, I am not using Boostrap framework.

Do I need to apply other media queries before the footer will stick? I am trying to add the footer to the bottom of my page.

Am I missing something my CSS media query for 769px or am I missing something in my .main-footer in my CSS Layout Container section under my Base Layout Styles.

I have included my code. Thank you for help! 

/********************************
 BASE STYLE ELEMENTS
*********************************/
/** {
  border: 1px solid yellow;
}*/

* {
  box-sizing: border-box;
}

.home-page {
  background-image: url(http://images.natureworldnews.com/data/images/full/5375/hypervelocity-star.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #000;
  line-height: 1.6em;
  font-family: 'Merriweather', serif;
}

.name  {
  color:  #91bfdb;
  /*color: #9cb6d9;*/
  font-family: 'Tangerine', cursive;
}

.subname {
  color:  #91bfdb;
  /*color: #9cb6d9;*/
  font-family: 'Tangerine', cursive;

}

.p-header {
  /*color:  #e4d1a4;*/
  color: #9cb6d9;
  font-family: 'Tangerine', cursive;
}

a {
  color:  #e4d1a4;
  /*color: #7D715D;*/
  font-family: 'Merriweather', serif;
  text-decoration: none;

}

li {
  list-style: none;
}


/********************************
      BASE LAYOUT STYLES
*********************************/

/*----  NAVIGATION  ----*/

.name {
  font-size: 2em;
}

.name {
  margin-top: 87px;
  margin-left: 20px;
}

.subname {
  font-size: 2.45em;
  margin-top: 78px;
  padding-left: 32px;
}

/*.name,*/
.main-nav li {
  margin-top: 35px;
  margin-bottom: 2px;
  text-align: center;
}

.main-nav a {
  padding: 10px 10px;
  text-align: center;
  display: block;
}

.main-nav a:hover {
  color: yellow;
}

/*----  LAYOUT CONTAINERS ----*/

.container {
  padding-left: 1em;
  padding-right: 1em;
}

.main-header {
  text-align: center;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  margin-bottom: 30px;
  overflow: hidden;
}

.main-footer {
  background: #cdd0d7;
  padding: 2em 0;
  text-align: center;
  height: 150px;

}

/*----  PAGE ELEMENTS ----*/

/*============================
        MEDIA QUERIES
==============================*/

@media (min-width: 769px) {

  .wrap {
    min-height: calc(100vh - 89px)
  }

  .container {
    width: 90%;
    max-width: 1150px;
    margin: 0 auto;;
  }

  .main-nav {
    float: right;
  }

  .main-nav li {
    float: left;
    margin-left: 5px;
  }

  .name {
    float: left;
  }

  .clearfix {
    content: "";
    display: table;
    clear: both;
  }
}
  

  <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-    scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <title>DevMagik</title>

          <link rel="stylesheet" href="css/normalize.css" />


          <link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
          <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
          <script src="https://use.fontawesome.com/0f50f445ba.js"></script>
        <link rel="stylesheet" href="css/styles.css">
  </head>
    <body class="home-page">

      <div class="wrap">
      <header class="main-header">
        <div class="container clearfix">
          <a href="index.html" class="name">
              <h1>Dev Magik</a></h1>


          <ul class="main-nav">
              <li><a href="about.html">About</a></li>
              <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
          <p class="subname">
          Web Development, Design, and Hosting</p>
      </header>
   </div> <!--End Wrapper-->

        <footer class="main-footer">

          <span>&copy; 2016 DevMagik/Andrea M.</span>
          <i class="fa fa-facebook-square" aria-hidden="true"></i>


          
        </footer>

    </body>
</html>

Upvotes: 0

Views: 578

Answers (1)

quasoft
quasoft

Reputation: 5438

Move min-height of .wrap class out of media query.

You need the minimum width both, when viewing the page on small and large screens.

Like that:

...

.wrap {
  min-height: calc(100vh - 89px)
}

@media (min-width: 769px) {

  .container {
    width: 90%;
    max-width: 1150px;
    margin: 0 auto;
  }

...

Note that vh works only in very modern browsers (IE >= 11, Firefox >= 50) See this link for compatibility details: http://caniuse.com/#feat=viewport-units.

There are other ways to make an element stick to the bottom, without using calc and vh. This article describes several ways to do that: https://css-tricks.com/couple-takes-sticky-footer/

One of them (called "Negative margin on footer" in the article above) is to add a negative margin to the footer (equal to the height of the footer) and bottom padding to the element that wraps content above the footer (again equal to the height of the footer):

Quote from https://css-tricks.com/couple-takes-sticky-footer/: There is negative top margins on footers

This technique did not require a push element, but instead, required an extra wrapping element around the content (the wrapping element that held everything except the footer) in which to apply matching bottom padding to. Again to prevent negative margin from lifting the footer above any content.

What needs to be changed in your CSS to use this technique:

...

.wrap {
  padding-bottom: 150px;
}

.main-footer {
  background: #cdd0d7;
  padding: 2em 0;
  text-align: center;
  height: 150px;
  margin-top: -150px;
}

...

Here is the whole code (HTML is same as yours):

/********************************
 BASE STYLE ELEMENTS
*********************************/
/** {
  border: 1px solid yellow;
}*/

* {
  box-sizing: border-box;
}

.home-page {
  background-image: url(http://images.natureworldnews.com/data/images/full/5375/hypervelocity-star.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #000;
  line-height: 1.6em;
  font-family: 'Merriweather', serif;
}

.name  {
  color:  #91bfdb;
  /*color: #9cb6d9;*/
  font-family: 'Tangerine', cursive;
}

.subname {
  color:  #91bfdb;
  /*color: #9cb6d9;*/
  font-family: 'Tangerine', cursive;

}

.p-header {
  /*color:  #e4d1a4;*/
  color: #9cb6d9;
  font-family: 'Tangerine', cursive;
}

a {
  color:  #e4d1a4;
  /*color: #7D715D;*/
  font-family: 'Merriweather', serif;
  text-decoration: none;

}

li {
  list-style: none;
}


/********************************
      BASE LAYOUT STYLES
*********************************/

/*----  NAVIGATION  ----*/

.name {
  font-size: 2em;
}

.name {
  margin-top: 87px;
  margin-left: 20px;
}

.subname {
  font-size: 2.45em;
  margin-top: 78px;
  padding-left: 32px;
}

/*.name,*/
.main-nav li {
  margin-top: 35px;
  margin-bottom: 2px;
  text-align: center;
}

.main-nav a {
  padding: 10px 10px;
  text-align: center;
  display: block;
}

.main-nav a:hover {
  color: yellow;
}

/*----  LAYOUT CONTAINERS ----*/

.container {
  padding-left: 1em;
  padding-right: 1em;
}

.main-header {
  text-align: center;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  margin-bottom: 30px;
  overflow: hidden;
}

.wrap {
  padding-bottom: 150px;
}

.main-footer {
  background: #cdd0d7;
  padding: 2em 0;
  text-align: center;
  height: 150px;
  margin-top: -150px;
}

/*----  PAGE ELEMENTS ----*/

/*============================
        MEDIA QUERIES
==============================*/

@media (min-width: 769px) {

  .container {
    width: 90%;
    max-width: 1150px;
    margin: 0 auto;;
  }

  .main-nav {
    float: right;
  }

  .main-nav li {
    float: left;
    margin-left: 5px;
  }

  .name {
    float: left;
  }

  .clearfix {
    content: "";
    display: table;
    clear: both;
  }
}
  <!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-    scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>DevMagik</title>

      <link rel="stylesheet" href="css/normalize.css" />


      <link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
      <script src="https://use.fontawesome.com/0f50f445ba.js"></script>
    <link rel="stylesheet" href="css/styles.css">
  </head>
<body class="home-page">

  <div class="wrap">
  <header class="main-header">
    <div class="container clearfix">
      <a href="index.html" class="name">
          <h1>Dev Magik</a></h1>


      <ul class="main-nav">
          <li><a href="about.html">About</a></li>
          <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
      <p class="subname">
      Web Development, Design, and Hosting</p>
  </header>
   </div> <!--End Wrapper-->

    <footer class="main-footer">

      <span>&copy; 2016 DevMagik/Andrea M.</span>
      <i class="fa fa-facebook-square" aria-hidden="true"></i>


      
    </footer>

</body>
</html>

Upvotes: 1

Related Questions