小编use*_*889的帖子

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

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

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

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

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

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

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

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

这是“关于”和“联系方式”页面的 CSS 样式:

.cf7_custom_style_1 {
  padding-left: 20%;
  padding-right: 20%;
}
Run Code Online (Sandbox Code Playgroud)

.aboutme {
  padding-left: 14%;
  padding-right: 14%;
}
Run Code Online (Sandbox Code Playgroud)

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

css wordpress mobile responsive-design responsive

7
推荐指数
1
解决办法
2万
查看次数

标签 统计

css ×1

mobile ×1

responsive ×1

responsive-design ×1

wordpress ×1