Docs

[Scott]

Hi Folks!

Okay, I’ve tried everything. There is a huge margin that appears at the bottom of my WooCommerce pages (see attached image). How the heck do I get rid of it, without effecting the bottom margins of the product pages, which don’t have this huge extra margin?

Many thanks for your help!

[Scott]

This reply has been marked as private.

[Nico]

Hi There,

Thanks for writing in.

Try adding this in your Customizer > Custom > CSS:

.woocommerce li.product{
margin-bottom:10px !important;
}

Adjust the number to achieve the space you want.

Thanks. Let us know how it goes.

[Scott]

The problem with this is that is removes the margin between products. It’s fine on desktop view (and solves my bottom margin problem), but in mobile view, when products stack on top of each other, there’s no margin between them.

It also makes the bottom margin on the single product pages drop into the footer (see attached image).

How do I fix this?

[Jade]

Hi there,

I can’t seem to replicate the issue on my end. I tried to view the area on a smaller screen and it looks correct with a space between the two elements. Were you able to solve it?

[Scott]

This reply has been marked as private.

[Rad]

Hi there,

Please change this CSS,

.woocommerce li.product {
    margin-bottom: 0 !important;
}

to this,

@media ( min-width: 768px ) {

  .post-type-archive-product .x-main .products > li {
  margin-bottom: 0px !important;
  }
  
}

Hope this helps.

[Scott]

This reply has been marked as private.

[Christopher]

Hi there,

Please update previous code to :

@media ( min-width: 768px ) {

  .post-type-archive-product .x-main .products > li, .archive .x-main .products > li {
    margin-bottom: 0;
}
}

Hope it helps.

[Author]

Posts