如何在移动端禁用WordPress Avada主题的盒装模式？

我帮你排查了下Avada主题的盒装模式结构，之前的代码没效果主要是选择器错误，而且思路有点偏差——我们不是要隐藏元素，而是要重置布局样式让它适配移动端全屏。

问题分析 #

Avada的盒装模式是给<html>标签添加了.boxed类，同时页面内容容器是.fusion-wrapper，你之前用的.body .html选择器语法错误，.layout-boxed-mode也不是Avada对应的类名，所以CSS无法生效。

正确的解决方案 #

把下面这段CSS代码添加到WordPress后台的「外观 > 自定义 > 额外CSS」或者Avada主题选项的「Custom CSS」里：

/* 移动端禁用Avada盒装模式，适配全屏 */
@media (max-width: 800px) {
  /* 重置html的盒装样式 */
  html.boxed {
    width: 100% !important;
    padding: 0 !important;
  }
  /* 重置页面容器的盒装样式，去掉阴影和边距 */
  .fusion-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
}

代码说明 #

• @media (max-width: 800px)：针对屏幕宽度小于等于800px的设备生效（你可以根据需求调整这个断点，Avada默认移动端断点是767px）
• html.boxed：Avada启用盒装模式时给html标签添加的类，重置它的宽度和内边距，取消盒装的留白
• .fusion-wrapper：Avada的页面内容容器，重置宽度、最大宽度和外边距，同时去掉盒装模式的阴影，让页面全屏显示

添加后刷新移动端页面，就能看到盒装模式的阴影和边距都消失了，页面会适配移动端全屏显示，提升体验。

内容的提问来源于stack exchange，提问作者Titouan Thd