Word break design issue

[ihiteshpatel]

Describe the bug Please check the below URL: https://wordpress.org/documentation/article/weblog-client/

To Reproduce Steps to reproduce the behavior:

1. Go to the URL: https://wordpress.org/documentation/article/weblog-client/
2. Switch to responsive mode 425px wide
3. Scroll down to the page
4. Some list items have word break issue

Expected behavior It should either wrap or scroll, whatever is more generally accessible.

Screenshots For more details, please check the attached screenshot.

[ihiteshpatel]

Hello,

We can fix this issue by adding the below CSS: .entry-content .wp-block-preformatted ul li{ word-break: break-word; }

[ryelle]

hi @ihiteshpatel! Thanks for reporting these issues. Since this is a similar issue to #51, I'm going to close this issue. If you find other word break issues, you can report them on #51.

[ihiteshpatel]

Describe the bug Some code blocks overflow their containers at 425px screen view or below. Please check the below URLs: https://wordpress.org/documentation/article/write-code-in-your-posts-classic-editor/ https://wordpress.org/documentation/article/inserting-images-into-posts-and-pages-block-editor/

To Reproduce Steps to reproduce the behavior:

Go to the above URL Switch to responsive mode, 425px wide Scroll down to the code blocks See something like the screenshot Expected behavior It should either wrap or scroll, whatever is more generally accessible.

[ihiteshpatel]

Hello,

We can fix above mentioned issues by adding the below CSS: https://github.com/WordPress/wporg-documentation-2022/issues/52#issuecomment-1452966539

.entry-content .wp-block-post-content { word-break: break-word; }