title: How to have responsive design smoothly flow into mobile design?
body: <p>I am writing a single-page app, and I've having a problem at a particular width. When on narrow screens, I want to use the full width, but I want to limit the width for readability on wider screens. This mostly works fine except when the screen is just above the limit width it formats badly.</p>
  
  <p>Here is a <a href="https://jsfiddle.net/dvmason/7pg6kbLc/8/" rel="nofollow noreferrer">jsfiddle</a> that mostly captures it (except that jsfiddle doesn't get the "Menu" in the right place - it is in the top right on local disk).</p>
  
  <p>The HTML looks like:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8" /&gt;
  
  &lt;head&gt;
    &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
    &lt;link rel="stylesheet" type="text/css" media="all" href="blah.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="page"&gt;
      &lt;div id="menu"&gt;
        &lt;a class="burger" href="#" onclick="document.body.classList.toggle('menu')"&gt;Menu&lt;/a&gt;
        &lt;table id="menu-table" class="open"&gt;
          &lt;tr&gt;
            &lt;th&gt;Menu&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Foo&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Bar&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div class="page" id="blah"&gt;
        &lt;h1&gt;Blah&lt;/h1&gt;
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and the CSS looks like:</p>
  
  <pre><code>#page {
    background: #fff;
    color: #000;
    width: 100%;
    padding: 1em;
    min-height: 200px;
    max-width: 700px;
    overflow: hidden;
  }
  
  body {
    padding: 0px;
    margin: 0px;
  }
  
  #page .page h1 {
    text-align: center;
  }
  
  #menu {
    overflow: hidden;
  }
  
  #menu .open {
    background: #fff;
    position: fixed;
    top: 0px;
    z-index: 98;
    font-size: 150%;
    text-align: center;
    white-space: nowrap;
    text-overflow: clip;
  }
  
  #menu.burger {
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 99;
  }
  
  table,
  tbody,
  tr,
  td,
  th {
    margin: 0px;
    padding: 0px;
    border: 0px;
    border-collapse: collapse;
  }
  
  #menu-table {
    border: thin solid black;
    width: 200px;
  }
  
  #menu-table tr {
    height: 4ex;
  }
  
  #menu-table td {
    border: thin solid black;
    border-left-width: 0px;
    border-right-width: 0px;
  }
  
  #menu-table td:hover {
    background: #f8f8f8;
  }
  
  #menu-table th {
    background: #e0e0e0;
  }
  
  body.menu #menu .open {
    right: 0px;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
  }
  
  body:not(.menu) #menu .open {
    right: -210px;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }
  
  @media only screen and (min-width: 701px) {
    #page {
      /*        box-shadow: 0px 0px 35px 10px rgb(150,150,150); */
      margin: 0 auto;
      transform: translate(0px, 0px);
    }
    body {
      background: #888;
      color: #fff;
    }
  }
  
  @media only screen and (max-width: 700px) {
    #page {
      margin: 0px;
    }
  }
  </code></pre>
  
  <p>If you resize the window just slightly larger than the text area, the right-side display is wrong. If you copy/paste to a local file, you'll also see that the menu doesn't properly display at that width.</p>
  
  <p>Additionally, on Safari, the whole menu is left displayed off to the right, instead of being <code>overflow: hidden</code> And it's very messed up... if you double-click on it you can "select" part of it, and then if you open the menu, the "selected" part is highlighted!! But clicking on it doesn't clear the highlight on the ghost version.</p>