3

I designed a page layout that is responsive and adjusts fine to smaller screens, but when I added in a code block (and used prism.js to format it), the responsiveness breaks. The code box and text content both spill over the width of the device and you have to scroll back and forth. Ideally, the code block should have its own scroll bar to view the code, but the content still adapts. I've tried playing around with different attributes of the flexbox that contains the content, but it still breaks the layout.

To try to narrow things down I've stripped the page down to:

<!DOCTYPE html>
<head>
    <link rel='stylesheet' href='page.css' />
    <link href="./external/prism.css" rel="stylesheet" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
</head>

<body>
    <script src="./external/prism.js"></script>
    <div class="article-container">
        <article>
            <h1 class="title">Test</h1>
            <p>Dolorem neque quiquia dolor. Est dolor dolor dolorem adipisci consectetur. Adipisci ipsum velit dolore
                consectetur quisquam eius. Non velit est ipsum adipisci adipisci quaerat.</p>
            <pre><code class="language-python">def some_code(file_name):
    with open("some_path/" + file_name + ".md", "r", encoding="utf-8") as input_file:
        return input_file.read()
</code></pre>
        </article>
    </div>

</body>

</html>

With page.css containing:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.article-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

article {
    width: 800px;
}

If I comment out both .article-container and article the page adjusts fine, but if either one of them is present it breaks. Also, if I leave the CSS as is and comment out the code block it's responsive.

Any types on how these components are interacting would be appreciated, thanks!

EDIT: To clarify, when the responsive design doesn't work, the page width does not adapt to the screen size. See screenshots below:

The content in fullscreen mode

How mobile looks without CSS - the code box scrolls like it should, but the rest of the page adapts

How mobile looks with CSS

Note that 2 is also how the site looks with CSS and without the codeblock. So something about the way they are interacting is breaking.

grahamjpark
  • 66
  • 6

2 Answers2

1

I think your problem lies within this rule:

    article {
        width: 800px;
    }

That's why the text on top of the code won't adjust itself to the screen.

The code tag itself must have some CSS rules implied that prevents the code from wrapping or "responding" to the screen, because indentaion is important inside that element, and should not be too affected by the screen size.

And maybe you'll want to add an overflow-x:auto; to the element so you can scroll to see more code when the screen isn't wide enough. This goes for overflow-y also if you want to scroll down inside the code too.

francovici
  • 536
  • 6
  • 14
  • I was thinking similar things. I tried commenting out the article css, but if you comment it out and just leave the .article-container, it is still broken. And the prism library adds in css for the code tag (which includes allowing you to scrol the code. You can see that if you comment out both article and .article-container in the css. – grahamjpark Jul 19 '20 at 23:43
  • I also tried the code out with the highlight.js library instead of prism. It pulls from their CDN so you should be able to play around with it (if you're curious) with just these two files: https://gist.github.com/grahamjpark/0cb9d2cfbe7a972bc20320781806e284 – grahamjpark Jul 19 '20 at 23:45
  • This was the best answer for me. – Lvca Aug 19 '23 at 21:04
1

I was able to fix the issue by just adding overflow: auto; to the CSS for the article section.

https://gist.github.com/grahamjpark/0cb9d2cfbe7a972bc20320781806e284#file-test-css-L15

I found the answer here:

Flex item with <pre> content not shrinking

Although this looks useful if that doesn't fix your issue:

https://weblog.west-wind.com/posts/2016/feb/15/flexbox-containers-pre-tags-and-managing-overflow

grahamjpark
  • 66
  • 6