如何在不同的屏幕尺寸上调整页脚

Question

https://yosofya.github.io/portfolio-V2.2/index.html

in the attached link of my website. I need the footer to be on the bottom of the Mobile/iPhone screens in Contact and About pages. It looks fine on my PC screen but on not on my iPhone.

I tried @media (max-width) and then increased the top margin of main-footer to push it down, but it didn't work. I will include the codes for the Contact page.

HTML:

<div class="contact-title">

  <h1> class="animated fadeInUp">Contact Me</h1>
  <p> Make sure you provide me with all of the information in case you
    want my help with your project. </p> <br>
    <p>I will be glad to reply as soon as possible. </p>
  </div>

  <form class="contact-form" action="mailto:designist.joey@gmail.com" method="post" enctype="text/plain">

    <input class="form-inputs" type="text" name="Name" size="50" placeholder="Your Name"> <br>
    <input class="form-inputs" type="email" name="Email" size="50" placeholder="Your Email"> <br>
    <textarea class="form-textarea" name="Meesage" rows="8" cols="52" placeholder="Your Message"></textarea> <br>
    <button class="form-button" type="submit" value="Send">Submit</button>


  </form>


</div>

CSS:

 .contact-title h1 {

 font-size: 7rem;
 margin-bottom: 20px;

}

 .contact-title p {
  margin: 2px 0;


}

.contact-form {

margin-top: 100px;
}

@media (max-width:600px) {

.main-footer { margin-top:600px;}

 }

 .main-footer p {

 padding-bottom: 100px;
 letter-spacing: 7px;
 margin: 0;
 }

Answer 1

Try this.

@media (max-width: 600px) {
  .main-footer {
     margin-top: 0px;
 }
}

Answer 2

Please add the following to your style.css:

@media (orientation:portrait) and (min-height: 1080px){
    body, html{
      margin:0;
      height:100%;
    }
}

@media (orientation:portrait) and (min-height: 1080px){
    .container-fluid {
      height: 100%;
    }
}

@media (orientation:portrait) and (min-height: 1080px){
    .main-footer.sticky-bottom {
      position: absolute; 
      left: 0; 
      right: 0; 
      bottom: 0;
    }
}

@media (orientation:portrait) and (min-height: 1080px){
    .contact-background {
      height: 100%;
    }
}

Then, add the class 'sticky-bottom' to about.html and contact.html:

<div class="main-footer sticky-bottom">

This should be commented or removed:

/* @media (max-width:600px) {

.main-footer { margin-top:600px;}

} */