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:
#50 (comment)

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]

#50 (comment)

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]

#50 (comment)

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]

#50 (comment)

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]

#50 (comment)

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]

#50 (comment)

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 #59 & #60).