Make WordPress Core

Opened 7 months ago

Closed 7 months ago

Last modified 7 months ago

#52823 closed defect (bug) (invalid)

CSS Alignment issue on WooCommerce product category page

Reported by: otisliddy Owned by:
Milestone: Priority: normal
Severity: major Version: 5.6.2
Component: Themes Keywords:
Focuses: ui, css Cc:


-- 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.

Attachments (1)

Screenshot 2021-03-15 at 23.10.46.png (1.0 MB) - added by otisliddy 7 months ago.
Screenshot of misalignment

Download all attachments as: .zip

Change History (3)

7 months ago

Screenshot of misalignment

#1 @sabernhardt
7 months ago

  • Component changed from Menus to Themes
  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

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:

#2 @otisliddy
7 months ago

Perfect, that fixed it, thanks!

Note: See TracTickets for help on using tickets.