Horizontal overflow on the blog pages

[pepelsbey]

Summary

Posts in the MDN blog cause overflow on mobile screens narrower than 403 px. It’s caused by code blocks. On regular MDN pages, it doesn’t happen.

URL

https://developer.mozilla.org/en-US/blog/mdn-blog-one-year-on/
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Reproduction steps

Go to a blog post with code samples with a narrow viewport, for example

Expected behavior

No horizontal scrolling, at least down to a 375 px wide screen.

Actual behavior

Horizontal scrolling and content overflow.

Device

Desktop

Browser

Firefox

Browser version

Stable

Operating system

Mac OS

Screenshot

Screenshots

By default, on a 375 px wide screen

With code blocks hidden

Anything else?

If you hide .code-example blocks in DevTools with display: none, the scrolling is gone.

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.