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
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.
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
