如何在移动设备上将产品组合布局从横向更改为纵向

本文将向您展示如何更改 产品捆绑折扣元素 使用自定义 CSS 将移动设备上的横向布局转换为纵向布局。

 步骤 1：打开自定义代码编辑器

• 在 GemPages 编辑器中，将鼠标悬停在 产品捆绑折扣 元件。
• 右键单击该元素。
• 选择 自定义代码.

步骤 2：添加 CSS 代码

将以下 CSS 代码复制并粘贴到自定义代码编辑器中：

@media (max-width: 767px) { .ElementClass gp-product-bundle-discount { display: flex; flex-direction: column; } }

步骤 3：替换元素类

更换 .元素类 使用您的实际 CSS 类 产品捆绑折扣 元件。

第 4 步：保存并发布

• 点击 已保存.
• 发布 您的页面。
• 打开实时页面或预览，验证产品组合现在是否在移动设备上以垂直布局显示。