How to increase space between two products on shop page in woo commerce(wordpress) in smartphones

admin

Administrator
Staff member
here's the custom css that we have used in wordpress woocommerce plugin.
We trying to show two products in a row on mobile view.
But there is no space between two products.
Refer the sample image. But we need some space between columns
here is the image <a href=" " rel="nofollow noreferrer"> as shown in image no space between products</a>

<ol>
<li>We tried adding margin to first child and float: left to last child but its not working for all products.</li>
</ol>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override">
Code:
/* 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 &gt; li &gt; 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 &gt; tbody &gt; 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;
}
}
</div>
</div>