Товары, связанные с woocommerce, 2 столбца для мобильных устройств

Question

Доброе утро,

Кажется, мне не удается отобразить мои продукты, связанные с Woocommerce, в двух столбцах в формате бок о бок. При просмотре на мобильном устройстве

на этой странице вы увидите, что связанные продукты расположены один за другим, id как 2 рядом, прежде чем начнется новая строка. https://ruggedasylum.com/product/solo-smoke-free-fire-pit/

Кто-нибудь может мне помочь с тем, как это достигается, пожалуйста?

Я пробовал это до сих пор, но он становится меньше и продолжает размещать 1 продукт на каждой строке. Он также переместил заголовок «Сопутствующие товары» влево, а не по центру.

@media screen and (max-width: 767px){
.woocommerce .related.products {
width: 50% !important;
}}

Я перешел на W3 Schools, и код CSS, который они предлагают для размещения бок о бок в адаптивном представлении, не Похоже, что разница меньше, чем в приведенном выше коде.

обратите внимание, я доволен тем, как он сейчас выглядит на настольной версии страницы.

Я с нетерпением жду Ваш вклад, очень благодарный Райан :)

Answer 1

---

  @media screen and (max-width: 767px){

   .related.products ul.products li.product {
    flex: 0 1 auto;
    width: 45%;

  }
}

, который должен помочь, но вы можете настроить% для получения дополнительной информации о flexbox, вы можете посетить это https://css-tricks.com/snippets/css/a-guide-to-flexbox/