使用 Magento 1.9 和 RWD 主题移动时堆叠项目

Question

我刚刚发现了很多帖子，但没有一个给出明确的答案：当用户是桌面用户时如何连续显示 3 个项目并在移动设备中垂直堆叠它们？

我看到这是可能的，无需对产品网格进行黑客攻击（但产品按行显示两个），也许我可以使用类似的东西来获得相同的结果。

我创建了这个示例，它能够在桌面上显示 3 个项目，并在一行中显示 2 个，在另一个中显示 1 个。这接近我想要的：

<ul class="products-grid products-grid--max-4-col first last odd">
<li><img alt="" src="http://192.241.128.153/media/wysiwyg/index/pencil.jpg" />
<div class="product-info" style="min-height: 167px;">
<h2>Assine</h2>
</div>
</li>
<li><img alt="" src="http://192.241.128.153/media/wysiwyg/index/pencil.jpg" />
<div class="product-info" style="min-height: 167px;">
<h2>Vote</h2>
</div>
</li>
<li><img alt="" src="http://192.241.128.153/media/wysiwyg/index/pencil.jpg" />
<div class="product-info" style="min-height: 148px;">
<h2>Receba</h2>
</div>
</li>
</ul>

谢谢！

Answer 1

您可以使用 CSS 中的媒体查询来实现这一点，例如..

 @media only screen and (max-width: 770px) {
      .products-grid li {
           width: 100%;
      }
 }

不要忘记产品列表版本。