Joomla Virtuemart 类别移动布局

Question

我试图解决这个问题一天，我找到了解决方案，但它不像我想象的那样，也不是我想要的，所以我在这里寻求更大更聪明的头脑 :)

我的网上商店在移动布局上每行显示一个产品，如下所示：

enter image description here

但我想连续看两个。现在，这就是问题所在：在 Virtuemart 的配置中，每行显示产品设置为 3，因为我想在计算机和台式设备（也包括笔记本电脑和更大的平板电脑）上每行看到 3 个产品，所以这没关系，一切工作正常。

但在移动设备上，在模板 mobile.css 中，它始终设置为连续显示 1。所以我搜索并找到了代码

.category-view .vm-col-3

设置为width: 100%

当我将这个插入到 50% 时，我得到了这个：

enter image description here

我插入clear: none和float: left什么也没发生。所以我想我必须找到一些 .row 代码，因为我看到这是连续 3 个产品，就像它在配置中设置的那样，只是现在它更小并且像这样排序，但仍然不像我想要的那样有。

然后，我找到了设置行的行：

.category-view .browse-view .row

并插入这一行：

clear: none;
float: left;
width: 50%;

有了这个，结果是最接近的，但仍然不是我需要的。 总是在结束 9 个产品时，接下来的 3 个在另一个之下（3 个产品），然后再次从连续两个开始，并在 9 个产品之后重复。

你可以在这里看到它（带手机）：box2.appleoprema.com/index.php/iphone6-maskice-i-zastita

谁能告诉我，如何解决这个问题？ 我尝试了很多方法和代码来解决这个问题，3天后我就是不知道该怎么办了。 提前感谢您的帮助。

Answer 1

你好，看看容器的结构好像是这样的

行 col-1 col-2 col-3 排 等等……

所以将width: 50%; 添加到该行会搞砸一切，因为每行分配了 3 个产品。

您可以做的是让width: 33% 到.product.vm-col.vm-col-3 为media="(max-width: 640px)" 每行显示3 个产品或保持原样，以便该列获得100% 的宽度，每行显示1 个产品。

如果您希望每行有 2 个产品用于移动显示，您可能应该检查后端（如果有这样的选项）或调整您正在使用的组件/模块的 html。