I created a design for a webpage that is fully responsive and adjusts smoothly to smaller screens. However, when I inserted a code block (and used prism.js to format it), the responsiveness of the layout was compromised. The code box and text content overflowed the width of the device, requiring users to scroll horizontally. Ideally, the code block should have its own scroll bar for code viewing while the rest of the content adapts properly. I attempted to modify different attributes of the flexbox containing the content, but the layout still broke.
In an effort to isolate the issue, I simplified the page to the following:
<!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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</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>
The page.css file includes:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.article-container {
width: 100%;
display: flex;
justify-content: center;
}
article {
width: 800px;
}
If I disable either .article-container or article, the page functions correctly, but leaving either one breaks the layout. Moreover, if I remove the code block, the responsiveness is restored.
Any insights into the interaction between these elements would be greatly appreciated. Thank you!
EDIT: To clarify, when the responsiveness fails, the page width does not adjust to the screen size. Refer to the screenshots below:
The content in fullscreen mode
Mobile view without CSS - the code box scrolls correctly while the rest of the page adapts
It's important to note that view 2 represents the site with CSS but without the code block. There seems to be an issue with how they are interacting that causes the problem.