2 продукта рядом друг с другом на странице категории продуктов Woocommerce

Question

Я использую WordPad Avada-theme и Woocommerce для интернет-магазина. Теперь я поместил некоторый код в свой css, чтобы отображать 2 товара рядом с собой в моем магазине в Avada в режиме адаптивного просмотра.

Я использовал этот код:

@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

На домашней странице ширина составляет 49%, а на странице продукта она отличается. Я добавил CSS в своем ответе с медиа-запросом, поскольку он необходим только в мобильном представлении. Надеюсь это поможет.

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

Answer 2

Глядя на исходный код страницы, вы забыли обернуть свой элемент UL своим div.woocommerce.columns-4

Если вы обернули свой элемент UL на странице продукта, вы должны получить тот же результат.

Answer 3

Попробуйте использовать это 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;
    }
  }

У вас нет div с классами 'woocommerce columns-4' на странице https://www.aalvink.nl/product-categorie/bbq-american-style/