Main content of page pushing Footer up in mobile

Question

I have been searching for fixes for hours. I'm quite sure I am not using them correctly. I have tried using wrappers, negative margin, and even a flex-grow fix. I cannot find anything to fix my problem so I am turning to Stack. In desktop width the footer stays at the bottom presumably because the content isn't growing below the footers position. However, when I change the viewport to a smaller mobile size the content grows and it causes the footer to rise.

html {
  font-size: 18px;
  box-sizing: border-box;
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

a {
  text-decoration: none;
}

.width-container {
  width: 90%;
  margin: auto;
}


/* Nav Start */

nav {
  background-color: #4b34fa;
}

nav > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#nav-sub-container {
  width: 35%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#link-container {
  margin: 10px 0;
}

#nav-title {
  font-size: 1.5em;
  color: #fff;
}

.link {
  margin: 10px;
  font-size: 1.2em;
  color: #fff;
}

.link:hover {
  animation: link-hover 500ms forwards;
}

@keyframes link-hover {
  0% {
    font-size: 1.2em;
  }
  100% {
    font-size: 1.3em;
  }
}

#mail-icon > i {
  color: #fff;
}

/* Nav End */


/* Main Start */

main {
  height: 100%;
  max-height: 100%;
}

#hero-flex {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#hero-bg {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('/imgs/hero-img.jfif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .5;
  width: 100%;
  height: 100%;
}

#hero-container {
  position: relative;
  height: 50%;
  z-index: 1;
}

#hero-content > h1 {
  margin: 0;
  font-size: 1.5em;
  color: #000;
}
#hero-content > p {
  margin: 0;
  font-size: 1.2em;
}

#hero-content > h1 > span {
  animation: color-change 1s forwards;
}

@keyframes color-change {
  0% {
    color: #000;
  }
  100% {
    color: #4b34fa;
  }
}

#about-container {
  height: 50%;
}

#about-container > div { 
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
}

#about-container > div > div {
  padding: 10px;
}

#about-me > h3{
  margin: 10px 0;
  font-size: 1.3em;
}

#about-me > p {
  font-size: 1em;
}

#tech-icon-grid-container {
  height: 50%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

#tech-icon-grid-container > p {
  margin: 10px;
  padding: 10px;
  justify-self: center;
  align-self: center;
  background-color: #4b34fa;
  color: #fff;
  border-radius: 10px 20px;
}

#tech-icon-grid-container > p:hover {
  background-color: #2b1aad;
  cursor: default;
}

.purplify {
  color: #4b34fa;
}

.purplify:hover {
  color: #2b1aad;
}
/* Main End */


/* Footer Start */

footer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

#social-icon-container {
  text-align: center;
}

.social-icon {
  margin: 0 5px;
  color: #4b34fa;
}

#social-icon-container > p {
  margin: 10px;
}

/* Footer End */

/* Media Query */

@media only screen and (max-width: 1300px) {
  
  #about-container > div {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
  }
}




  
  
  
  Braden Hancock

  
  
  

  
  
  



  
  
    
    

       Braden Hancock
 

      

        

           My Work 
           Blog 
           Resume 
  
        
    
          

      

    

  
  


  

  

    

      

      

        

          Hey I'm Braden 
          Front-End Web Developer

        

      

    

    

      

        

            My Journey

            In 2019, I recieved an email for a free trial of Codecademy Pro. I decided to give it a try, and I was amazed by how straight forward it was. Boy was I in for a surprise. I managed to gain a strong understanding of HTML and a basic understanding of CSS in my one month trial. I moved on to using other resources, mostly Google and Youtube when my trial ran out. Throughout the next few months I really started to get familiar with CSS, but I got bored. This is when I took my first look at JavaScript. It was very alien compared to HTML and CSS. The syntax was completely different from anything I had ever seen before, and the material was a lot harder to comprehend. Upon doing some further research I decided to buy a course on Udemy. This course advertised to take you from, "Zero to Hero". I spent a few months studying this course and completing small projects. This course was really good for learning the fundamentals of things like, functions, loops, arrays, objects, and classes. When I completed the course I decided to start putting what I had learned to use with projects that weren't prepared for me. This was when I began having to learn how to search for the answers I needed. I learned how to use Stackoverflows' search engine and began participating with the community. For me, learning how to search and find the information I'm looking for has been one of the most impactful things I've learned. I have worked with a few other programming languages briefly, and I must say JavaScript is my favorite. I love being able to switch from front-end to back-end work so easily, and it has quite a few frameworks I'm very fond of.

        

        

          Tech I Often Use

            

              HTML
              CSS
              SCSS
              JavaScript
              NodeJS
              ReactJS
              Jest
              Git

          

          

            Above I listed a few languages I enjoy using. I didn't include any frameworks because there are so many it would cover this page in icons. A few of my favorites however are, Express, Axios, Cheerio, EJS, Handlebars, and Mongoose.

          

        

      

    
    
  

  


  



  

      
      
      
    
    © 2021 Braden Hancock

s.kuznetsov · Accepted Answer

Replace height: 100vh with min-height: 100vh, in the css of the body:

body {
  ...
  min-height: 100vh;
}

Main content of page pushing Footer up in mobile

Answers (1)

Related Questions