移动端与桌面端Row元素响应式显示空白间隙问题求助

看起来你已经找对了方向，但只处理了图片的可见性，没搞定Row容器本身——这就是空白间隙的根源！因为Row本身带着内边距、外边距甚至最小高度（看你给的代码里Row有min-height: 77.82vh），就算里面的图片藏了，Row容器还是会占空间。下面给你两种最靠谱的解决方法，优先用第一种可视化操作，不用写代码：

方法一：用WPBakery内置的响应式可见性控制（推荐） #

WPBakery本身就自带了控制Row在不同设备显示/隐藏的功能，完全不用改代码：

• 打开首页的WPBakery编辑器，找到导航下方的两个Row（一个是桌面版1900x500图，一个是移动端800x800图）
• 点击Row右上角的铅笔图标打开Row设置面板
• 在设置面板里找「响应式可见性」（Responsive Visibility）选项，一般在「设计选项」或「响应式」标签页下
  • 给桌面版Row勾选「在移动端隐藏」（Hidden on Mobile/Tablet，具体选项名可能随WPBakery版本略有不同）
  • 给移动端Row勾选「在桌面端隐藏」（Hidden on Desktop）
• 保存设置后刷新页面，对应设备下整个Row会被完全隐藏，空白间隙自然就消失了

方法二：自定义CSS强制隐藏Row（如果内置功能失效） #

如果因为主题或插件冲突导致内置可见性控制不好用，就用CSS来强制控制：

1. 给两个Row分别加自定义类：
   • 编辑桌面版Row，在设置的「额外类名」（Extra Class Name）字段输入 desktop-only-row
   • 编辑移动端Row，同样在「额外类名」输入 mobile-only-row
2. 打开主题的「自定义CSS」面板（或者WPBakery的全局自定义CSS区域），添加以下代码：

/* 移动端（767px及以下）隐藏桌面版Row */
@media (max-width: 767px) {
  .desktop-only-row {
    display: none !important;
  }
}

/* 桌面端（768px及以上）隐藏移动端Row */
@media (min-width: 768px) {
  .mobile-only-row {
    display: none !important;
  }
}

这段代码会直接让对应设备下的Row完全不渲染，彻底消除空白。

补充说明 #

你给的代码里，移动端的Column已经加了vc_hidden-lg vc_hidden-md类（桌面端隐藏），但Row本身没有隐藏类，而且Row设置了min-height: 77.82vh——哪怕Column里的图片藏了，Row的最小高度还是会撑出一大块空白，所以必须把整个Row藏起来才行。

内容的提问来源于stack exchange，提问作者Stone Soft