移动端网站左滑露空白边+展开导航菜单偏右问题求助

一、移动端左滑出现空白边的修复 #

直接在WordPress后台的「外观→自定义→额外CSS」中添加以下代码：

html, body {
    overflow-x: hidden !important;
}
.site-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

这段代码强制限制页面横向滚动范围，隐藏超出视口的内容，解决左滑空白问题。

二、移动端展开菜单偏右的修复 #

同样在「额外CSS」中添加适配移动端的定位调整代码：

@media (max-width: 768px) {
    .mobile-menu-container {
        left: 0 !important;
        margin-left: 0 !important;
        max-width: 100vw !important;
    }
}

如果代码中的.mobile-menu-container类名不匹配你的菜单元素，可通过浏览器调试工具（按F12切换到移动端模式，右键菜单元素选择「检查」）查看实际类名并替换。

额外排查建议 #

• 用浏览器调试工具检查页面元素：滑动页面时，查看哪个元素的宽度超过100vw，直接给该元素添加max-width:100vw; overflow:hidden;样式即可
• 避免修改主题核心代码，所有样式调整优先使用「额外CSS」或子主题，防止主题更新后丢失修改

内容的提问来源于stack exchange，提问作者Doc Preposterous