CODEWITHSUNDEEP
phpcsswordpresswoocommerce
DrMTR
DrMTR

Reputation: 509

How to remove gap between product categories in WooCommerce Shop?

I started recently to customize one site, but have one issue that don't know how to fix.

in Shop page on my URL

when try to open from smartphone there are too big gap between top, and between product categories I see this:

See image

I tried myself to remove that gap using this CSS:

  .woocommerce ul.products li.product, .woocommerce-page ul.products 
li.product {
            min-height: 420px !important;
        }

But seems that also affect Product Archives page, makes bad looking. How to add css for mobile only to fix that? Thanks in Advance.

Upvotes: 2

Views: 2775

Answers (2)

Israr Mansuri
Israr Mansuri

Reputation: 151

I have two answers of the question you can do whatever you like to do, its up to you.

  1. Remove the min-height 490px

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {

min-height: 490px !important;

margin-bottom: 0px;

}

and

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {

margin-bottom: -170px!important;

}

this from css

and second please add the css to your page where you wrote the css like here http://prntscr.com/faq33h as you wrote css.

@media (max-width: 480px) {

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {

    min-height: 425px !important;

    margin-bottom: 0px;

}

}

@media (max-width: 375px){

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {

    min-height: 400px !important;

    margin-bottom: 0px;

}

} @media (max-width: 375px){

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {

    min-height: 365px !important;

    margin-bottom: 0px;

}

}

if you have any question please let me know.

Upvotes: 0

Tristup
Tristup

Reputation: 3663

I found that using the following style : 

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin-bottom: -100px;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-height: 490px !important;
margin-bottom: 0px;

}

You should remove min-height and margin-bottom to fix the height issues within the products. And above the product section you have padding with header-content and wrapper-content, please change according to your screen size.

Hope that work.

Upvotes: 1

Related Questions