Hello Sayed,
I just reviewed the website link you provided and I found the spacing proper between the Left Filter and Right Product Section. Is there any else you are looking for or I misunderstood your query here.
If you can help me understand your problem may be with a screenshot I can further try to provide some solution.
Thanks.
Hi kartik,
I have 3 columns in my shop page, the spacing between the products is not proper. notice how the is no space between the product columns.
I tried to locate the error and i found the it is in this snippet code, but unforttinatly i could not solve it.
$product_categories = get_terms( 'product_cat', $args );
echo "<h3 style='color:#4D8B55; text-align:center;'>- Product Categories -</h3>";
$count = count($product_categories);
if ( $count > 0 ){
echo "<ul>";
foreach ( $product_categories as $product_category ) {
echo '<li style="display:inline; padding: 5px 5px;"><a href="' . get_term_link( $product_category ) . '">' . $product_category->name . '</li>';
}
echo "</ul>";
}
Something is inserting an anchor link into the ul list without the usual li tag and it’s throwing off the nth-child(3n) CSS code that starts a new row. A quick and dirty patch would be to adjust the nth-child factor (add to additional CSS of customizer):
.woocommerce-page.columns-3 ul.products li.product:nth-child(3n), .woocommerce.columns-3 ul.products li.product:nth-child(3n) {
margin-right: 20px;
clear: none:
}
.woocommerce-page.columns-3 ul.products li.product:nth-child(3n+1), .woocommerce.columns-3 ul.products li.product:nth-child(3n+1) {
margin-right: 0;
clear: left;
}
A better solution would be to figure out what’s inserting that anchor link. It’s not displayed but it throws off the nth-child rule.
