Make WordPress Core

Opened 3 years ago

Closed 19 months ago

#53268 closed defect (bug) (reported-upstream)

Twenty Twenty: WooCommerce Styles on Product Page are Inconsistent

Reported by: deborah86's profile deborah86 Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.7.2
Component: Bundled Theme Keywords:
Focuses: css Cc:

Description

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

Desktop View
https://t2.dcompany.site/wp-content/uploads/2021/05/Screenshot-2021-05-24-11.31.40-AM.png

Mobile View
https://t2.dcompany.site/wp-content/uploads/2021/05/Screenshot-2021-05-24-12.08.05-PM.png

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

Attachments (2)

single-product-2019.png (655.6 KB) - added by justinahinon 3 years ago.
Twenty Nineteen
single-product-2021.png (579.0 KB) - added by justinahinon 3 years ago.
Twenty Twenty One

Download all attachments as: .zip

Change History (7)

#1 @deborah86
3 years ago

I forgot to mention the "Description" is smaller than the normal h2's that are in the theme.

Last edited 3 years ago by deborah86 (previous) (diff)

#2 @justinahinon
3 years ago

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
3 years ago

Twenty Nineteen

@justinahinon
3 years ago

Twenty Twenty One

#3 @deborah86
3 years ago

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

#4 @sabernhardt
20 months ago

  • Keywords close added

The WooCommerce styles reset the max-width to 100% but only on the h2 and p elements, so those need updating (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.

Version 0, edited 20 months ago by sabernhardt (next)

#5 @sabernhardt
19 months ago

  • Keywords close removed
  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

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

Note: See TracTickets for help on using tickets.