Twenty Twenty: WooCommerce Styles on Product Page are Inconsistent

[deborah86]

The styles on the WooCommerce product pages are inconsistent and don't match. This is true in both desktop and mobile views.

Desktop View

Mobile View

From the images you can see:

• The paragraph text in the description is different from the paragraph text in the long description
• All the headings are indented except for the H2 heading.
• The inner bullet points are not indented
• There isn't proper spacing between the inner bullet points
• The bullet points are outside the content area
• The font family of the bulleted text is different form the paragraph text
• The quote is indented

[deborah86]

I forgot to mention the "Description" is smaller than the normal h2's that can be added to the block.

[justinahinon]

Thank you for opening this @deborah86.

I can confirm the reported issues. And they also happen on some other recent default themes (Twenty Nineteen and Twenty Twenty One).

[justinahinon]

Twenty Nineteen

[justinahinon]

Twenty Twenty One

[deborah86]

Has this been updated? The status is still awaiting review.

[sabernhardt]

The WooCommerce styles reset the max-width to 100% but only on the h2 and p elements, so the other elements need updating in the plugin (not the theme). The plugin also needs to update the unordered list margin/padding.

I did not find an existing issue about these elements on the WooCommerce repository. Would you like to open an issue (or one for each theme)?
​https://github.com/woocommerce/woocommerce/issues

If you would prefer that I open the issue(s), I could do that soon.

[sabernhardt]

I took a little long to open the issue, but if you would like to follow the discussion, it's at
​https://github.com/woocommerce/woocommerce/issues/35844