как настроить нижний колонтитул на разных размерах экрана - PullRequest
Новая
       8

как настроить нижний колонтитул на разных размерах экрана

0 голосов
/ 07 мая 2020

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

в прикрепленной ссылке моего сайта. Мне нужно, чтобы нижний колонтитул находился внизу экранов Mobile / iPhone на страницах «Контакты» и «О нас». Он отлично смотрится на моем экране P C, но не на моем iPhone.

Я попробовал @media (max-width), а затем увеличил верхнее поле основного нижнего колонтитула до pu sh его вниз, но это не сработало. Я включу коды для страницы контактов.

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;
 }

Ответы [ 2 ]

0 голосов
/ 08 мая 2020

Добавьте к своему стилю следующее. 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%;
    }
}

Затем добавьте класс 'sticky-bottom' к примерно html и контакту. html: 

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

Следует прокомментировать или удалить: 

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

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

} */
0 голосов
/ 07 мая 2020

Попробуйте это. 

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