Technical Documentation Page - Help with overflow on mobile screens

Hi freecodecampers!

I’m about to finish my Technical Documentation project, but I can’t solve an “overflow” issue when shrinking the browser window. Can anyone help me, please?

Here is the codepen of the project:

And here is a screenshot of the problem (highlighted in a the red rectangle):

I found the “bug”.

The problem was in a line of thext inside a code block, which is styled like this:

code {
    display: block;
    text-align: left;
    white-space: pre-wrap;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    background-color: #f7f7f7;
    padding: 15px;
    margin: 1rem 2rem 1rem 2rem;
    border-radius: 5px;
    border: 1px dashed rgba(0, 0, 0, .2)

The issue was that there is a long string that can’t be break into smaller words due to the word-break: normal; declaration. This is not apparent when all the styles are applied, but removing some of them actually allows the line to be displayed as a big, long string. By changing the declaration to word-break: break-all; the problem is solved.

Source: word-break - CSS: Cascading Style Sheets | MDN

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.