While developing a single-page app, I encountered an issue with the layout when the screen width reaches a specific point. On narrow screens, I prefer to utilize the full width, but for wider screens, I want to limit the width for better readability. The layout mostly functions as intended, except when the screen is slightly larger than the defined limit, resulting in poor formatting.
You can view a representation of this issue on jsfiddle. Please note that the menu placement may differ due to jsfiddle settings (it should be in the top right corner).
The structure of the HTML code is:
<!DOCTYPE html>
<meta charset="utf-8" />
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="stylesheet" type="text/css" media="all" href="blah.css">
</head>
<body>
<div id="page">
<div id="menu">
<a class="burger" href="#" onclick="document.body.classList.toggle('menu')">Menu</a>
<table id="menu-table" class="open">
<tr>
<th>Menu</th>
</tr>
<tr>
<td>Foo</td>
</tr>
<tr>
<td>Bar</td>
</tr>
</table>
</div>
<div class="page" id="blah">
<h1>Blah</h1>
blah blah blah...
</div>
</div>
</body>
The corresponding CSS styling is:
#page {
background: #fff;
color: #000;
width: 100%;
padding: 1em;
min-height: 200px;
max-width: 700px;
overflow: hidden;
}
body {
padding: 0px;
margin: 0px;
}
...
@media only screen and (max-width: 700px) {
#page {
margin: 0px;
}
}
If you resize the window just slightly larger than the text area, the display on the right side becomes incorrect. Similarly, when you copy/paste the code into a local file, the menu does not display correctly at that particular width.
In addition, Safari displays the entire menu shifted off to the right instead of being hidden. This results in major visual glitches where part of the menu can even be selected and highlighted mistakenly. Clicking on it doesn't remove the highlighted selection from the ghost version either.