html - 为什么移动网站右侧有过多的空白?
问题描述
有一个移动版的网站,在 iPhone 的右侧有过多的空间。该网站是 www.liveinhomecare.com
以前通过使用溢出进行修复:隐藏;但不再工作了。
有人知道解决这个问题的方法吗?
顺便说一句,我有可能导致此问题的文本的全角横幅,但使用上述修复程序纠正了此问题,但现在它又回来了......
.banner h1 {
clear: both;
font-weight: 400;
margin: 0;
text-rendering: optimizeLegibility;
text-transform: uppercase !important;
color: #ebebeb !important;
font-size: 12px !important;
font-size: 0.75rem !important;
line-height: 1.25;
margin-top: 0.250em;
margin-bottom: 0em;
}
.banner h2{
margin-top: 0.750em !important;
color: #ffffff !important;
}
.banner {
position: relative; /* for child pseudo-element */
z-index: 0;
margin: 0 -600rem;
/* add back negative margin value */
padding: 0.25rem 600rem;
background: #3887b7;
color: #ffffff !important;
padding-top: 50px;
padding-bottom: 30px;
margin-bottom: 40px;
overflow: hidden;
}
.banner:before {
content: "";
position: absolute;
z-index: -1; /* behind parent */
top: 0;
bottom: 0;
/* subtract h2 padding (1.5rem) */
left: 598.5rem;
right: 598.5rem;
background: #3887b7;
overflow: hidden;
}
解决方案
只需添加溢出-x:隐藏;到您的 HTML 元素:
html {
height: 100%;
overflow-x: hidden;
}
推荐阅读
- stata - Stata 虚拟变量开始日期结束日期
- c++ - Bison if 语句 - 在解析块语句之前设置符号表
- sql - 你如何选择多个表,但只限制一个表
- json - 如果正在使用自定义类型,如何使 Yesod 成为 Key 记录?
- apache-camel - 升级到 3.7.2 后,Apache Camel 中的 FluentProducerTemplate 出现异常
- laravel - Laravel 电报机器人 sdk
- erpnext - 通过自定义脚本更新 frappe 触发字段
- grammar - BNF 语法规范
- android - XMLHttpRequest 未在 react-native Android 中触发/调用任何 [on] 回调
- javascript - 解析错误,我的类型检查器函数上缺少分号