[wp-trac] [WordPress Trac] #52823: CSS Alignment issue on WooCommerce product category page

[WordPress Trac]

#52823: CSS Alignment issue on WooCommerce product category page
--------------------------+----------------------
 Reporter:  otisliddy     |       Owner:  (none)
     Type:  defect (bug)  |      Status:  closed
 Priority:  normal        |   Milestone:
Component:  Themes        |     Version:  5.6.2
 Severity:  major         |  Resolution:  invalid
 Keywords:                |     Focuses:  ui, css
--------------------------+----------------------
Changes (by sabernhardt):

 * status:  new => closed
 * resolution:   => invalid
 * component:  Menus => Themes
 * milestone:  Awaiting Review =>


Comment:

 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%;
 }
 }}}

 [https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-built-
 in-custom-css-inputs-for-advanced-responsive-editing 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:
 - [https://www.elegantthemes.com/forum/ Divi forum]
 - [https://wordpress.org/support/ WordPress forums]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/52823#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform