CSS Alignment issue on WooCommerce product category page

[otisliddy]

-- Steps to recreate --

1. Open ​https://hullabaloo.ie/product-category/napkin-shop/ on desktop
2. Make sure window is wide enough (about 1000 pixels or half a monitor's width)
3. Observe 4th & 5th and 8th and 9th products have no gap between them

-- Details --
Some elements on the WooCommercne product category grid listing seem to strangely have margin-right hardcoded as zero, causing some product to be "stuck together". This appears to be inherited from a page-level CSS class ".woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img". I do not know how to fix this using WordPress. Is it a case that I am misusing or misconfiguring the page?

Please could you acknowledge receipt of this message by replying to otisliddy@… and hullabaloo@…, even if you don't have an immediate fix or answer.

[otisliddy]

Screenshot of misalignment

[sabernhardt]

Hi @otisliddy!

It's an issue involving the Divi stylesheet style-cpt.dev.css. Every fourth list item in the full-width page product grid has no right margin (li not img).

The first line here causes the misalignment on this page:

  .et_full_width_page.woocommerce-page ul.products li.product:nth-child(4n),
  .et_pb_row .et_full_width_page.woocommerce-page ul.products li.product:nth-child(4n),
  .single.et_left_sidebar.woocommerce-page #main-content ul.products li.product:nth-child(3n),
  .archive.et_left_sidebar.woocommerce-page #main-content ul.products li.product:nth-child(3n),
  .et_pb_row .et_left_sidebar.woocommerce-page #main-content ul.products li.product:nth-child(3n),
  .single.et_right_sidebar.woocommerce-page #main-content ul.products li.product:nth-child(3n),
  .archive.et_right_sidebar.woocommerce-page #main-content ul.products li.product:nth-child(3n),
  .et_pb_row .et_right_sidebar.woocommerce-page #main-content ul.products li.product:nth-child(3n) {
    margin-right: 0; }

You could add the following CSS to restore the right margin:

.et_full_width_page.woocommerce-page ul.products li.product:nth-child(4n) {
    margin-right: 3.8%;
}

​Custom CSS in Divi

Since this is not a core WordPress bug, I'll close the Trac ticket. If you need further help, you could use the support forums:

• ​Divi forum
• ​WordPress forums

[otisliddy]

Perfect, that fixed it, thanks!