Content overflow in responsive views

[tellyworth]

Describe the bug Some code blocks overflow their container on mobile. Examples from https://meta.trac.wordpress.org/ticket/6780:

https://wordpress.org/documentation/article/tools-erase-personal-data-screen/ https://wordpress.org/documentation/article/tools-export-personal-data-screen/ https://wordpress.org/documentation/article/tools-network-screen/ https://wordpress.org/documentation/article/video-shortcode/

(reported by patelhitesh on meta trac)

To Reproduce Steps to reproduce the behavior:

1. Go to the above URLs
2. Switch to responsive mode, 425 wide
3. Scroll down to code blocks
4. See something like the screenshot

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

Screenshots I couldn't reproduce all of those, but here's an example from tools-network-screen in Firefox 109:

[aezazs-multidots]

Hello @tellyworth

Thank you for creating this issue.

We can fix this issue by adding the below CSS.

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

After adding this CSS, the design of this page will look like this:

Thank you !

[ihiteshpatel]

Describe the bug Please check the below URL: https://wordpress.org/documentation/article/what-are-smilies/

To Reproduce Steps to reproduce the behavior:

Go to the above URL Switch to responsive mode, 425 wide Scroll down to code blocks Table content is overflow out of the container

[ihiteshpatel]

To overcome the content overflow issue from the below link: https://github.com/WordPress/wporg-documentation-2022/issues/50#issuecomment-1448087237

Please find the below CSS: .entry-content.wp-block-post-content { Overflow-X: auto; }

[mdhiteshpatel]

Describe the bug Some code blocks overflow their container on mobile.

https://wordpress.org/documentation/article/wordpress-glossary/

To Reproduce Steps to reproduce the behavior:

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

Screenshots

[mdhiteshpatel]

https://github.com/WordPress/wporg-documentation-2022/issues/50#issuecomment-1476200303

Please find the below CSS to solve the issue mentioned in the above comment: .wp-block-group ul { word-break: break-word; }

[mdhiteshpatel]

Describe the bug Some code blocks overflow their container on mobile.

https://wordpress.org/documentation/article/faq-work-with-wordpress/

To Reproduce Steps to reproduce the behavior:

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

Screenshots

[mdhiteshpatel]

https://github.com/WordPress/wporg-documentation-2022/issues/50#issuecomment-1477712834

Please find the below CSS to solve the content formatting issue mentioned in the above comment. .entry-content.wp-block-post-content pre { word-break: break-word; }

[mdhiteshpatel]

Describe the bug Some code blocks overflow their container on mobile.

https://wordpress.org/documentation/article/wordpress-privacy/

To Reproduce Steps to reproduce the behavior:

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

Screenshots

[mdhiteshpatel]

Describe the bug Some code blocks overflow their container on mobile.

https://wordpress.org/documentation/article/wordpress-privacy/

To Reproduce Steps to reproduce the behavior:

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

Screenshots

To solve the above design break issue, please find the below CSS: .wp-block-post-content ol li {word-break: break-word; }

[mdhiteshpatel]

Describe the bug Some code blocks overflow their container on mobile.

https://wordpress.org/documentation/article/twenty-nineteen/

To Reproduce Steps to reproduce the behavior:

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

Screenshots

[mdhiteshpatel]

Describe the bug Some code blocks overflow their container on mobile.

https://wordpress.org/documentation/article/twenty-twenty/

To Reproduce Steps to reproduce the behavior:

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

Screenshots

[mdhiteshpatel]

https://github.com/WordPress/wporg-documentation-2022/issues/50#issuecomment-1489743969

To solve the content overflow issue in the above issue, please find the below CSS:

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

[mdhiteshpatel]

Describe the bug Some code blocks overflow their container on mobile.

https://wordpress.org/documentation/article/twenty-twenty-changelog/

To Reproduce Steps to reproduce the behavior:

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

Screenshots

[mdhiteshpatel]

https://github.com/WordPress/wporg-documentation-2022/issues/50#issuecomment-1491345516

To solve the content overflow issue in the above issue, please find the below CSS:

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

[ihiteshpatel]

Describe the bug Some code blocks overflow their container on mobile.

https://wordpress.org/documentation/article/twenty-twenty-one-changelog/

To Reproduce Steps to reproduce the behavior:

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

[ihiteshpatel]

https://github.com/WordPress/wporg-documentation-2022/issues/50#issuecomment-1498665487

To solve the content overflow issue in the above issue, please find the below CSS:

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

[StevenDufresne]

https://wordpress.org/documentation/article/how-to-install-wordpress/

Screenshot

[estelaris]

https://wordpress.org/documentation/article/how-to-install-wordpress/

Screenshot

This article was moved to DevHub and it has no problems there.

[StevenDufresne]

This article was moved to DevHub and it has no problems there.

I'm not sure I understand. When I visit that link I clearly see the problem.

[ryelle]

I'm not sure I understand. When I visit that link I clearly see the problem.

That page has been unpublished, if you visit it logged out, it's a 404. We need to update the link on the Download page to https://developer.wordpress.org/advanced-administration/before-install/howto-install/ (this will also be fixed once those redirects are in place, see https://github.com/WordPress/wporg-documentation-2022/issues/59 & https://github.com/WordPress/wporg-documentation-2022/pull/60).