title: Ipad Cuts Off Text in Landscape Mode Even Without CSS Applied
body: <p>I'm currently trying to figure out why my layout is getting cut off on the right whenever it's viewed on an iPad (XCode emulator) in landscape orientation. Here's what's extra weird: even when I remove <em>all</em> css from the layout, I still run into the same issue. My guess is that it has something to do with my viewport settings or something else in my main layout file: </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,maximum-scale=1.0"&gt;
          &lt;title&gt;MyCV - Levi Hackwith&lt;/title&gt;
          &lt;link rel = "stylesheet" href = "/public/assets/css/app.css" /&gt;
          &lt;link rel = "stylesheet" href = "//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id = "app"&gt;
              {{{body}}}
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here's the markup for the main content:</p>
  
  <pre><code>&lt;section id = "sidebar"&gt;
      &lt;section class = "contact-info"&gt;
          &lt;div class = "avatar"&gt;
              &lt;img src = "https://www.gravatar.com/avatar/{{item.gravatar}}
                   ?s=400"&gt;
          &lt;/div&gt;
          &lt;hr /&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;span class = "label"&gt;Name&lt;/span&gt;
                  &lt;span&gt;
                      {{item.firstName}} {{item.lastName}}
                  &lt;/span&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;span class = "label"&gt;Email&lt;/span&gt;
                  &lt;span&gt;
                      {{item.email}}
                  &lt;/span&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;span class = "label"&gt;Location&lt;/span&gt;
                  &lt;span&gt;
                      {{item.addresses.home.city}},
                      {{item.addresses.home.state}}
                  &lt;/span&gt;
              &lt;/li&gt;
              {{#if item.sites.length}}
              &lt;li&gt;
                  {{#each item.sites}}
                  &lt;a href = "{{this.url}}" target = "_blank"&gt;
                      &lt;i class ="fa-icon {{this.icon}} fa"&gt;&amp;nbsp;&lt;/i&gt;
                  &lt;/a&gt;
                  {{/each}}
              &lt;/li&gt;
              {{/if}}
          &lt;/ul&gt;
      &lt;/section&gt;
  &lt;/section&gt;
  &lt;section id = "main-content"&gt;
      {{#each item.workHistory}}
      &lt;div class = "work-history-item"&gt;
          &lt;div class = "company-info"&gt;
              &lt;span class = "company-name"&gt;{{name}}&lt;/span&gt;
              &lt;time datetime= "{{startDate}}"&gt;
                  {{#formatDate startDate 'MMMM YYYY'}}{{/formatDate}} -
                  {{#if endDate}}
                  {{#formatDate endDate 'MMMM YYYY'}}{{/formatDate}}
                  {{else}}
                  Present
                  {{/if}}
              &lt;/time&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;div&gt;
                  &lt;p class = "work-description"&gt;
                      {{description}}
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class = "skill-list"&gt;
              {{#each skills}}
              &lt;span class = "label"&gt;{{this.name}}&lt;/span&gt;
              {{/each}}
          &lt;/div&gt;
      &lt;/div&gt;
      {{/each}}
  &lt;/section&gt;
  </code></pre>
  
  <p>A live demo of the app can be found here: <a href="http://digitalresume.herokuapp.com/users/54530e03c575dc86d61d22f8" rel="nofollow">http://digitalresume.herokuapp.com/users/54530e03c575dc86d61d22f8</a></p>
  
  <p>In order to see the issue you'll need to strip out the css with dev tools.</p>