Как увеличить расстояние между двумя продуктами на странице магазина в Woo Commerce (WordPress) в смартфонах

Question

вот пользовательский CSS, который мы использовали в плагине WordPress WooCommerce.Мы пытаемся показать два продукта подряд в мобильном представлении.Но нет места между двумя продуктами.Обратитесь к образцу изображения.Но нам нужно некоторое пространство между столбцами, вот изображение , как показано на изображении без пробелов между продуктами

1. Мы попытались добавить поле для первого дочернего элемента и float: слева до последнего дочернего элемента, но егоне работает для всех продуктов.

/* Woocommerce */
.woocommerce ul.products li.product { text-align: center; }
.woocommerce ul.products li.product .desc { background: none; }
.woocommerce ul.products li.product .desc h4 { font-weight: 900; }

#yith-searchsubmit {
  display:none !important;
  visibiltiy:hidden !important;
}

.header-classic #Top_bar
{
border-bottom:3px solid #953234 !important;
}

#Top_bar .menu li ul
{
left:500 !important;
}


input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea, .woocommerce .quantity input.qty
{
width:100% !important;
}

.topmenu_mobile
{
  display:none;
 
}
@media only screen and (max-width: 768px)
{
.top_bar_right {
    display:none !important;
    visibility:hidden !important;
}

.topmenu_mobile
{
  display:block !important;
}

#Top_bar .menu > li > a
{
padding:0px !important;
}
.widget_archive ul, .widget_nav_menu ul
{
background:none !important;
}
}

.with_aside .four.columns
{
  float:left !important;
}

.rmagic .alert-error
{
background:none !important;
border:none !important;
}

.alert-heading
{ 
display:none !important;
}

.woocommerce-privacy-policy-text
{
display:none !important;
visibility:hidden !important;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range
{
background-color:#333333 !important;

}

.woocommerce .woocommerce-customer-details address
{
padding:0px 80px !important;
width:auto !important;
}

.rmagic .rmcontent.rm-login-wrapper .rm_forgot_pass
{
text-align:right !important;
}

.alert
{
margin-bottom:0px !important;
}

.woocommerce .woocommerce-customer-details address
{
font-weight:bold !important;
}

.ysm-search-widget .search-submit
{
display:none !important;
visibility:hidden !important;
}


  .elementor-heading-title
{
color:#ffffff!important;
}


.button-stroke a.button.button_theme:not(.action_button), .button-stroke a.button.button_theme:not(.action_button), .button-stroke a.button.button_theme .button_icon i, .button-stroke a.tp-button.button_theme, .button-stroke button, .button-stroke input[type="submit"], .button-stroke input[type="reset"], .button-stroke input[type="button"]
{
color:#ffffff !important;
background:#953234 !important;
}


.style-simple .accordion .question
{
display:none !important;
}

/*.dokan-edit-row
{
color:#000000 !important;
}
*/

.withdraw
{
display:none !important;
visibility:hidden !important;
}

.settings
{
display:none !important;
visibility:hidden !important;
}

.dokan-table-striped > tbody > tr:nth-of-type(odd)
{
  background-color:#000000 !important;
}

.price, .product-name, .product-price, .product-quantity, .product-subtotal, .product-remove, .cart-subtotal th, .shipping th, .order-total th, .product-total, .woocommerce-table--order-details th
{
color:#cccccc !important;
}

.woocommerce ul.products li.product
{
width: 22% !important;
}



@media only screen and (max-width: 480px)
.woocommerce ul.products.col-4 li.product {
   width: 48% !important; 
.woocommerce ul.products.col-4 li.product:first-child{ 
margin-right: 4%!important; 
}
.woocommerce ul.products.col-4 li.product:last-child{ 
float:right: !important; 
   }


}


@media only screen and (max-width: 896px)
.woocommerce ul.products li.product, div.wpb_wrapper .woocommerce ul.products li.product {
    width: 48%!important;
    margin: 0 5px 20px!important;
}
}

Answer 1

Мы попробовали это и оно работает нормально.

@media only screen and (max-width: 480px){
.woocommerce ul.products.col-4 li.product {
   width: 48% !important; 
}
.woocommerce ul.products.col-4 li.product:nth-child(2n+1){ 
margin-right: 4%!important; 
}
.woocommerce ul.products.col-4 li.product:nth-child(2n+1){ 
float:right: !important; 
   }
}
}

Answer 2

Маскировка оставшейся ширины как поля.Установите margin-right для первого элемента списка.

Попробуйте это

@media only screen and (max-width: 480px)
.woocommerce ul.products.col-4 li.product {
   width: 48% !important;
}
.woocommerce ul.products.col-4 li:first-child{
   margin-right: 4%;
}

Остальное использование float:right до последнего ребенка