防止手机侧滑答案

【问题标题】：Preventing side scroll on mobile防止手机侧滑
【发布时间】：2015-11-04 10:56:32
【问题描述】：

我正在尝试通过她的网站 jessheading.com 帮助一位朋友

她正在使用 WordPress 主题和 WP Touch 移动插件。但是，当有人在移动设备上点击查看完整站点版本时，当您缩小时，带有引号的橙色框会在页面的中间位置消失（创建一种横向滚动）。

那个盒子上的 CSS 是：

.pull-quote {
  background: #fb8063;
  width: 300%;
  margin: 30px 0 30px -100%;
  z-index: 70;
  position: relative;
 }

如何修复 CSS 或视口设置以防止缩小到橙色框溢出到右侧？

【问题讨论】：

出现水平滚动对吧？

标签： css wordpress mobile

【解决方案1】：

盒子的父母：

{
    overflow-y: auto
}

【讨论】：

【解决方案2】：

.pull-quote {
    background: #fb8063;
    width: 300%;
    margin: 30px 0 30px -100%;
    z-index: 70;
    position: relative;
    overflow: hidden;
}

这只是剪辑溢出，其余内容将不可见

需要考虑的其他一些事情是调整整个橙色框以及带有它的标签的大小。

您可以尝试的其他溢出 css 是：滚动、自动等。

甚至可以将橙色框的宽度设置为固定，并将其显示在具有橙色背景的 div 标签内。

希望对你有帮助

【讨论】：