如何在移动视图中使填充响应？

Question

我正在使用 wordpress，我使用 CSS 通过添加填充使我的“关于”和“联系”页面的宽度更加居中和更小。但是，当我这样做时，尤其是在移动视图中（我认为平板电脑还可以），因此两边都有空白。

我正在使用的主题是按照我的想法构建的，我无法在该主题中找到使元素看起来更小的宽度并在页面上居中的东西，所以我使用填充来让它看起来像我想要。

'Contact' page of my site in mobile view

'Portfolio' page of my site in mobile view

这是我网站的链接：http://www.lisaweng.com/contact/

是否有一个 CSS 可以让这些页面在移动视图上查看时显示为正常或全宽，即使我添加了填充，就像投资组合页面如何在移动设备上查看全宽一样，即使它在屏幕两侧都有空白时在桌面版上查看？

附：对于填充“关于”和“联系”页面元素的 CSS，我确实使用了百分比而不是像素。我不确定为什么在移动视图中查看时它没有完全响应。

这是我的 CSS 在“关于”和“联系”页面中的样子：

.cf7_custom_style_1 {
  padding-left: 20%;
  padding-right: 20%;
}

和

.aboutme {
  padding-left: 14%;
  padding-right: 14%;
}

有解决此问题的代码吗？或者知道为什么会这样？如果有用于移动视图修复的代码，那么它是否也适用于平板电脑，或者平板电脑是否也有一个 CSS 来修复它应该如何的响应？

Answer 1

使用@media 查询在 CSS 中添加断点。

您需要在 CSS 代码中利用媒体查询来添加特定断点。

将此添加到您的样式表可能会有所帮助：

@media only screen and (max-width: 950px) {
   .cf7_custom_style_1 {
      padding-left: 10%;
      padding-right: 10%;
   }
}

@media only screen and (max-width: 600px) {
   .cf7_custom_style_1 {
      padding-left: 0;
      padding-right: 0;
   }
}

使用上面的代码在 950px 和 600px 处添加断点。这意味着如果窗口大小 = 950px，则将此 CSS 类更改为这些属性。