当屏幕尺寸变小时，页脚被拉到左边

Question

我试图让我的网站响应，但当屏幕尺寸变小时 <footer> 被拉到左边。这是照片

<p><footer> 上方的标签留在中间。

当屏幕尺寸较大时，250px 页脚到达其位置。

这是 JSFiddle 中的代码：

Answer 1

您在移动媒体查询中输入的表单出现问题。它正在敲掉文字，您需要将其更改为：

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

Answer 2

@Bakhodir 按钮中断到第二行，因为最大宽度媒体查询较低。这应该有效：

@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/

当屏幕尺寸变小时，页脚被拉到左边

Footer is pulled to left when screen size gets smaller

html

css

flexbox

responsive-design