#52823 closed defect (bug) (invalid)
CSS Alignment issue on WooCommerce product category page
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | major | Version: | 5.6.2 |
Component: | Themes | Keywords: | |
Focuses: | ui, css | Cc: |
Description
-- Steps to recreate --
- Open https://hullabaloo.ie/product-category/napkin-shop/ on desktop
- Make sure window is wide enough (about 1000 pixels or half a monitor's width)
- 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)
Change History (3)
#1
@
4 years 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%; }
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:
Screenshot of misalignment