Question

我在网上商店使用Wordpress Avada主题和Woocommerce。现在，我在CSS中添加了一些代码，以在响应式视图中在我位于Avada的商店中彼此相邻显示2个产品。

我使用了以下代码：

@media only screen and (max-width: 800px) {
/* lists on mobile */
div.woocommerce.columns-4 > ul {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
/*li elements on mobile*/
div.woocommerce.columns-4 > ul > li {
width: 50%;
box-sizing: border-box;
}
}

现在，在首页（Aalvink.nl`上我得到了2个相邻的产品（有很大的改进），但是在产品类别页面上，我仍然看到每列1个产品（例如https://www.aalvink.nl/product-categorie/bbq-american-style/ ）。

有人知道如何解决此问题吗？还是有人能看到我做错了什么，因为这些类别页面被排除在这种样式之外？

Answer 1

尝试使用此CSS：

@media only screen and (max-width: 800px) {
  /* lists on mobile */
    .products.products-4 {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
    }
  /*li elements on mobile*/
    .products.products-4 > li {
      width: 50%;
      box-sizing: border-box;
    }
  }

在第https://www.aalvink.nl/product-categorie/bbq-american-style/页上，您没有具有woocommerce columns-4类的div

Answer 2

主页中的宽度为49％，而产品页面中的宽度则不同。我在媒体查询的答案中添加了CSS，因为仅在移动视图中才需要。希望这可以帮助。

@media (max-width:767px){
  #main ul.products > li.product{
      width:49%;
      float:left !important;
  }
}

Answer 3

在查看页面的源代码时，您忘记了用div.woocommerce.columns-4包装UL元素

如果将UL元素包装在产品页面中，应该得到相同的结果。

Woocommerce产品类别页面上2个产品相邻

3 个答案: