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

我刚刚发现了很多帖子，但没有一篇能给出一个清晰的答案：当用户在桌面上时，我怎么能在一行中显示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>

阿辛


投票


雷杰巴

---

谢谢

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

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

---

不要忘了产品列表的版本。

Hello@womblegold，很抱歉这么新手，但是您能发布一个完整的html示例来说明您的建议吗？：DHi，这不会出现在你的HTML中，它会出现在你的自定义CSS样式表中。