Нижний колонтитул сдвигается влево при уменьшении размера экрана

Question

Я пытаюсь сделать свой веб-сайт адаптивным, но когда размер экрана становится меньше, <footer> перемещается влево. Вот фото

tag above stays in the center.

When screen size is bigger 250px footer gets to its position.

Here is the code in JSFiddle:

https://jsfiddle.net/d4mwnt9q/1/

Answer 1

@ Кнопка Баходира переходит во вторую строку из-за низкой максимальной ширины медиа-запроса. Это должно работать:

@media screen and (max-width: 570px) {
  .form {
    width: 100%;
    max-width: 48rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    flex-direction: column;
    padding: 0 2rem;

  }

  .form > input {
    width: 100%;
  }

  .form > button {
    margin-top: 1rem;
  }
}

Проверить https://jsfiddle.net/urosevic/ruhg9djq/14/

Answer 2

Ввод вашей формы в запросе мобильного мультимедиа создает проблемы. Он сбивает текст, вам нужно изменить его с:

@media screen and (max-width: 550px) {
 .form>input {
  width: 28rem;
 }
}

на 100% в мобильной версии, как это

@media screen and (max-width: 550px){
   .form>input {
   width: 100%;
 }
}

Затем центрируйте текст p в нижнем колонтитуле вот так

.footer p {
font-size: 2.4rem;
color: #fff;
margin-top: 7rem;
text-align: center;
}