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

Question

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

我正在使用的主题是按照我的想法构建的，我无法在该主题中真正找到使元素看起来更小宽度并以页面为中心的内容，因此我使用填充来使其显示为我想要的方式。

移动视图中我网站的“联系”页面

移动视图中我网站的“投资组合”页面

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

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

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

这是“关于”和“联系方式”页面的 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 类更改为这些属性。