Issue with footer not staying stuck to bottom of page in mobile view ? Please Help

I’m having issues with my footer not staying at the bottom of the page in mobile view. I’ve set
footer{
position: sticky;
top: 100%; }

I’m thinking it may have to do with using flexbox for header and footer and grid for the rest of my layout ? I’ve used this footer before on another project with no issues.


as you can see the footer appears in the middle of the second picture not at the bottom.

I will include the relevant code below;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>My Travel Blog</title>
        <!-- Style Css -->
        <link rel="stylesheet" href="styles/index.css" />
        <meta name="viewport" content="width=device-width, initial scale=1.0">
        <script src="https://kit.fontawesome.com/5b0bc60eb6.js" crossorigin="anonymous"></script>
    </head>

    <body>

    <header>
      <!-- Header Navigation -->
      <nav class="container">
        <h2 class="logo">My Personal Travel Blog</h2>
        <div class="top-nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Travel Tips</a></li>
        </ul>
        </div>
      </nav>
    </header>

      <div id="grid-container">
        <div class="blog-image-1"><img src="./images/manila11.jpg" alt="Manila City"></div>
        <div class="blog-image-2"><img src="./images/manila22.jpg" alt="Manila Coastline"></div>
        <div class="blog-image-3"><img src="./images/manila33.jpg" alt="Manila Skyline at Night"></div>
        <div class="main-blog-content">
          <h1>An Unforgettable Week In Manila</h1>
          <p> Manila, the bustling cosmopolitan capital city of the Philippines, gorgeous Spanish colonial buildings blended with ultra-modern skyscrapers, making Manila seem modern and full of history at the same time.</p>

          <h2>The First Day</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In nulla posuere sollicitudin aliquam. Ante in nibh mauris cursus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Dapibus ultrices in iaculis nunc. Malesuada fames ac turpis egestas. Felis bibendum ut tristique et egestas quis. </p>

          <h3>Our Accomadation</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In nulla posuere sollicitudin aliquam. Ante in nibh mauris cursus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Dapibus ultrices in iaculis nunc. Malesuada fames ac turpis egestas. Felis bibendum ut tristique et egestas quis. </p>

          <h3>Local Cuisine</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In nulla posuere sollicitudin aliquam. Ante in nibh mauris cursus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu.</p>

          <h3 class="attractions-list">Top 5 Must See Attractions</h3>
          <ul>
            <li>National Museum</li>
            <li>Fort Santiago</li>
            <li>Intramuros</li>
            <li>San Agustin Church</li>
            <li>Rizal Park</li>
          <ul>

          <figure class="accomodation-img">
            <img src="./images/manila11.jpg" alt="Manila City">
            <figcaption>The Hilton Hotel Manila</figcaption>
          </figure>


        </div>
        <div class="author-details">
          <img src="./images/author.jpg" class="author-image">
          <p class="bio">Jacksen James</p>
          <p class="bio">Digital Nomad & Travel Writter</p>
          <p class="bio">Graduated Udacity - Front End Engineer '22</p>
          <br><br>
          <p class="author-main-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In nulla posuere sollicitudin aliquam. Ante in nibh mauris cursus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Dapibus ultrices in iaculis nunc. Malesuada fames ac turpis egestas. Felis bibendum ut tristique et egestas quis.</p>

        </div>

      </div>


      <!-- Footer -->
      <footer class="footer-container">
        <div class="footer-left">
          <ul>
          <li class="links-title">Websites We <i class="fa-solid fa-heart"></i></li>
          <br>
          <li class="web-link"><a href="https://www.smartraveller.gov.au/" target="_blank">Smart Traveller</a></li>
          <li class="web-link"><a href="https://www.lonelyplanet.com/" target="_blank">Lonely Planet</a></li>
          <li class="web-link"><a href="https://www.skyscanner.com.au/" target="_blank">Sky Scanner</a></li>
          <li class="web-link"><a href="https://www.tripadvisor.com/" target="_blank">Trip Advisor</a></li>

        </ul>
      </div>

        <div class="footer-center">
          <!--<div class="image-container"> -->
            <img src="us.jpg" alt="us">
        </div>


        <div class="footer-right">
          <p class="socialtext">FOLLOW OUR SOCIALS</p>
          <a href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-square fa-3x fb-icon"></i></a>
          <a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram fa-3x insta-icon"></i></a>
        </div>



    </body>
</html>

@import "footer.css";
@import "manilablog.css";

@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Monda&family=Montserrat:ital,wght@0,800;1,400;1,600&family=Pacifico&family=Russo+One&display=swap');

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  min-height: 100vh;
}

#grid-container {
  display: grid;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 100vh;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
  "blog-image-1 main author"
  "blog-image-2 main author"
  "blog-image-3 main author";
  grid-gap: 0.6rem;
  color: white;

}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
}

.blog-image-1 {
  grid-area: blog-image-1;
}

.blog-image-2 {
  grid-area: blog-image-2;
}

.blog-image-3 {
  grid-area: blog-image-3;
}

.main-blog-content {
  grid-area: main;
  background-color: orange;
  padding: 20px;
/*  overflow: hidden; */
}

.main-blog-content p {
  padding: 20px;
}

.attractions-list {
  display: inline;
}
.accomodation-img {
  display: inline-block;
  height: 150px;
  width: 200px;
}

.author-details {
  grid-area: author;
  background-color: red;
  padding: 20px;
}

.author-image {
  margin: auto;
  margin-top: 20px;
  margin-bottom: 35px;
  height: 200px;
  width: 200px;
  border-radius: 75%;
  justify-content: center;
}


@media only screen and (max-width: 700px) {
  #grid-container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 20fr 2.5fr 4fr;
    grid-template-areas:
    "main main main"
    "blog-image-1 blog-image-2 blog-image-3"
    "author author author";
    /*overflow: hidden;*/
  }
}

/* Footer and Bottom Navigation */

footer {
  position: sticky;
  display: flex;
  top: 100%;
  margin-top: 0px;
  background-color: #6B6E6D;
  padding: 15px;
  border-top: solid 3px gold;
  font-family: 'Mochiy Pop One', sans-serif;
  min-width: 336px;
}

footer ul li {
  list-style: none;
  font-weight: bold;
}

.footer-container{
  display: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.footer-left{
}



.links-title {
  font-size: 1.5rem;
  font-weight: ;
}

.links-title i {
  color: red;
  font-size: 2rem;
}

.web-link {
  font-size: 1rem;
}

.web-link a {
  text-decoration: none;
}

.web-link a:hover {
  color: pink;
}



.socialtext {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.footer-center img {
  height: 160px;
}

.footer-right{
}

.fb-icon {
  color: blue;
  margin-right: 15px;
}

.fb-icon:hover {
  transform: scale(1.2);
}

.insta-icon {
  color: fuchsia;
}

.insta-icon:hover {
  transform: scale(1.2);
}

@media only screen and (max-width: 655px) {

.footer-container {
  width: 100%;
}

.footer-center {
padding: 15px 0px;
}
}

Hello!
I think I may have fixed the issue, in your CSS your footer wasn’t listed in the grid-template-areas: on line 93; which is where the @media transformed the screen size.
I also noticed that some closing tags were missing in your HTML; I don’t think that affected your CSS styling though!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>My Travel Blog</title>
  <!-- Style Css -->
  <link rel="stylesheet" href="styles/index.css" />
  <meta name="viewport" content="width=device-width, initial scale=1.0">
  <script src="https://kit.fontawesome.com/5b0bc60eb6.js" crossorigin="anonymous"></script>
</head>

<body>

  <header>
    <!-- Header Navigation -->
    <nav class="container">
      <h2 class="logo">My Personal Travel Blog</h2>
      <div class="top-nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Travel Tips</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <div id="grid-container">
    <div class="blog-image-1"><img src="./images/manila11.jpg" alt="Manila City"></div>
    <div class="blog-image-2"><img src="./images/manila22.jpg" alt="Manila Coastline"></div>
    <div class="blog-image-3"><img src="./images/manila33.jpg" alt="Manila Skyline at Night"></div>
    <div class="main-blog-content">
      <h1>An Unforgettable Week In Manila</h1>
      <p> Manila, the bustling cosmopolitan capital city of the Philippines, gorgeous Spanish colonial buildings blended with ultra-modern skyscrapers, making Manila seem modern and full of history at the same time.</p>

      <h2>The First Day</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In nulla posuere sollicitudin aliquam. Ante in nibh mauris cursus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Dapibus ultrices in iaculis nunc. Malesuada fames ac turpis egestas. Felis bibendum ut tristique et egestas quis. </p>

      <h3>Our Accomadation</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In nulla posuere sollicitudin aliquam. Ante in nibh mauris cursus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Dapibus ultrices in iaculis nunc. Malesuada fames ac turpis egestas. Felis bibendum ut tristique et egestas quis. </p>

      <h3>Local Cuisine</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In nulla posuere sollicitudin aliquam. Ante in nibh mauris cursus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu.</p>

      <h3 class="attractions-list">Top 5 Must See Attractions</h3>
      <ul>
        <li>National Museum</li>
        <li>Fort Santiago</li>
        <li>Intramuros</li>
        <li>San Agustin Church</li>
        <li>Rizal Park</li>
        <!-- Added closing tag for ul-->
      </ul>

      <figure class="accomodation-img">
        <img src="./images/manila11.jpg" alt="Manila City">
        <figcaption>The Hilton Hotel Manila</figcaption>
      </figure>

    </div>
    <div class="author-details">
      <img src="./images/author.jpg" class="author-image">
      <p class="bio">Jacksen James</p>
      <p class="bio">Digital Nomad & Travel Writer</p>
      <p class="bio">Graduated Udacity - Front End Engineer '22</p>
      <br><br>
      <p class="author-main-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In nulla posuere sollicitudin aliquam. Ante in nibh mauris cursus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Dapibus ultrices in iaculis nunc. Malesuada fames ac turpis egestas. Felis bibendum ut tristique et egestas quis.</p>

    </div>

  </div>

  <!-- Footer -->
  <footer class="footer-container">
    <div class="footer-left">
      <ul>
        <li class="links-title">Websites We <i class="fa-solid fa-heart"></i></li>
        <br>
        <li class="web-link"><a href="https://www.smartraveller.gov.au/" target="_blank">Smart Traveller</a></li>
        <li class="web-link"><a href="https://www.lonelyplanet.com/" target="_blank">Lonely Planet</a></li>
        <li class="web-link"><a href="https://www.skyscanner.com.au/" target="_blank">Sky Scanner</a></li>
        <li class="web-link"><a href="https://www.tripadvisor.com/" target="_blank">Trip Advisor</a></li>

      </ul>
    </div>

    <div class="footer-center">
      <!--<div class="image-container"> -->
      <img src="us.jpg" alt="us">
    </div>

    <div class="footer-right">
      <p class="socialtext">FOLLOW OUR SOCIALS</p>
      <a href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-square fa-3x fb-icon"></i></a>
      <a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram fa-3x insta-icon"></i></a>
    </div>
    <!-- Added closing tag for footer-->
  </footer>

</body>

</html>
@import "footer.css";
@import "manilablog.css";

@import url("https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Monda&family=Montserrat:ital,wght@0,800;1,400;1,600&family=Pacifico&family=Russo+One&display=swap");

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  min-height: 100vh;
}

#grid-container {
  display: grid;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 100vh;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "blog-image-1 main author"
    "blog-image-2 main author"
    "blog-image-3 main author";
  grid-gap: 0.6rem;
  color: white;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
}

.blog-image-1 {
  grid-area: blog-image-1;
}

.blog-image-2 {
  grid-area: blog-image-2;
}

.blog-image-3 {
  grid-area: blog-image-3;
}

.main-blog-content {
  grid-area: main;
  background-color: orange;
  padding: 20px;
  /*  overflow: hidden; */
}

.main-blog-content p {
  padding: 20px;
}

.attractions-list {
  display: inline;
}
.accomodation-img {
  display: inline-block;
  height: 150px;
  width: 200px;
}

.author-details {
  grid-area: author;
  background-color: red;
  padding: 20px;
}

.author-image {
  margin: auto;
  margin-top: 20px;
  margin-bottom: 35px;
  height: 200px;
  width: 200px;
  border-radius: 75%;
  justify-content: center;
}

@media only screen and (max-width: 700px) {
  #grid-container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 20fr 2.5fr 4fr;
    grid-template-areas:
      "main main main"
      "blog-image-1 blog-image-2 blog-image-3"
      "author author author"
      /*Added footer-container to @media so max-width is reflected for footer*/
      "footer-container";
    /*overflow: hidden;*/
  }
}

/* Footer and Bottom Navigation */

footer {
  position: sticky;
  display: flex;
  top: 100%;
  margin-top: 0px;
  background-color: #6b6e6d;
  padding: 15px;
  border-top: solid 3px gold;
  font-family: "Mochiy Pop One", sans-serif;
  min-width: 336px;
}

footer ul li {
  list-style: none;
  font-weight: bold;
}

.footer-container {
  display: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.footer-left {
}

.links-title {
  font-size: 1.5rem;
  font-weight: ;
}

.links-title i {
  color: red;
  font-size: 2rem;
}

.web-link {
  font-size: 1rem;
}

.web-link a {
  text-decoration: none;
}

.web-link a:hover {
  color: pink;
}

.socialtext {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.footer-center img {
  height: 160px;
}

.footer-right {
}

.fb-icon {
  color: blue;
  margin-right: 15px;
}

.fb-icon:hover {
  transform: scale(1.2);
}

.insta-icon {
  color: fuchsia;
}

.insta-icon:hover {
  transform: scale(1.2);
}

@media only screen and (max-width: 655px) {
  .footer-container {
    width: 100%;
  }

  .footer-center {
    padding: 15px 0px;
  }
}

Let me know if this still gives you issues and we can continue to work on it together!

1 Like

I’ve figured it out. All that was needed was position: relative, and bottom: - *** px;
I will just need to add a couple of different media queries to make sure it always stays in the optimal bottom position.

@media only screen and (max-width: 655px) {

.footer-container{
position: relative;
bottom: -1175px;
}

Thanks again so much for your time and effort helping me.

Kind Regards,
Jacksen

Oooh, I didn’t know it was so easy! Thank you for letting me know how you fixed it, I was still trying to fix it myself haha!

I’ll be cheering you on for your future sites and projects too!

Kindly,
Kayla