title: Zurb Foundation Mobile version not showing on mobile phones
body: <p>So I have a site with Zurb Foundation, the css version along with my Play framework application(1.2.7). <strong>No Play code has been added yet</strong>. I have the basic layout of the site and it works perfectly on desktop. I resize the page on desktop and I can see the mobile version in action. All good. I deployed my site on Google App Engine and accessed the site from my mobile phone and I dont see the mobile version but if I resize the browser on my desktop, the mobile site is viewable. I dont know why I cant view the mobile site version on my mobile phone(iPhone 5s, Safari and Windows 920, Internet Explorer) </p>
  
  <p>The url is <strong><a href="http://thai-capital-lace.appspot.com" rel="nofollow">http://thai-capital-lace.appspot.com</a></strong></p>
  
  <p>Code for my homepage is</p>
  
  <pre><code>#{set title:'Home' /}
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  
  &lt;link rel="stylesheet" href="@{'public/stylesheets/css/foundation.css'}" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;nav class="top-bar" data-topbar&gt;
    &lt;ul class="title-area"&gt;
      &lt;li class="name"&gt;
  
        &lt;h1&gt;&lt;a href="@{MainController.homepage}"&gt;&lt;img alt="" src="@{'public/images/logo.png'}" style="height:40px;width:40px;"&gt;  Thai Capital Lace&lt;/a&gt;&lt;/h1&gt;
      &lt;/li&gt;
      &lt;li class="toggle-topbar menu-icon"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;section class="top-bar-section"&gt;
      &lt;!-- Right Nav Section --&gt;
      &lt;ul class="right"&gt;
        &lt;li class="active"&gt;&lt;a href="@{MainController.homepage}"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=""&gt;&lt;a href="@{MainController.products}"&gt;Products&lt;/a&gt;&lt;/li&gt;
        &lt;li class=""&gt;&lt;a href="@{MainController.contact}"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;!-- Left Nav Section --&gt;
      &lt;!-- &lt;ul class="left"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Left Nav Button&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Left Nav Button 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/section&gt; --&gt;
  &lt;/nav&gt;
  
   &lt;div class="row"&gt;
  &lt;div class="large-12 columns"&gt;
  
  
  
    &lt;div class="hide-for-small"&gt;
      &lt;div id="featured"&gt;
            &lt;img src="http://placehold.it/1000x400&amp;text=Slide Image" alt="slide image"&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="small-12 show-for-small"&gt;&lt;br&gt;
        &lt;img src="http://placehold.it/1000x600&amp;text=For Small Screens"/&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;/div&gt;
   &lt;/div&gt;&lt;br&gt;
  
   &lt;div class="row"&gt;
     &lt;div class="large-12 columns"&gt;
      &lt;h5 class="panel"&gt;Our Best Sellers&lt;/h5&gt;
      &lt;div class="row"&gt;
  
      &lt;div class="large-3 small-6 columns"&gt;
        &lt;img src="http://placehold.it/250x250&amp;text=Thumbnail"/&gt;
        &lt;h6 class="panel"&gt;Description&lt;/h6&gt;
      &lt;/div&gt;
  
      &lt;div class="large-3 small-6 columns"&gt;
        &lt;img src="http://placehold.it/250x250&amp;text=Thumbnail"/&gt;
        &lt;h6 class="panel"&gt;Description&lt;/h6&gt;
      &lt;/div&gt;
  
      &lt;div class="large-3 small-6 columns"&gt;
        &lt;img src="http://placehold.it/250x250&amp;text=Thumbnail"/&gt;
        &lt;h6 class="panel"&gt;Description&lt;/h6&gt;
      &lt;/div&gt;
  
      &lt;div class="large-3 small-6 columns"&gt;
        &lt;img src="http://placehold.it/250x250&amp;text=Thumbnail"/&gt;
        &lt;h6 class="panel"&gt;Description&lt;/h6&gt;
      &lt;/div&gt;     
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
   &lt;div class="row"&gt;
   &lt;div class="large-12 columns"&gt;
    &lt;div class="row"&gt;
  
      &lt;div class="large-8 columns"&gt;
        &lt;div class="panel radius"&gt;
  
        &lt;div class="row"&gt;
        &lt;div class="large-6 small-6 columns"&gt;
  
          &lt;h4&gt;Header&lt;/h4&gt;&lt;hr/&gt;
          &lt;h5 class="subheader"&gt;Risus ligula, aliquam nec fermentum vitae, sollicitudin eget urna. Donec dignissim nibh fermentum odio ornare sagittis.
          &lt;/h5&gt;
  
        &lt;div class="show-for-small" align="center"&gt;
          &lt;a href="#" class="small radius button"&gt;Call To Action!&lt;/a&gt;&lt;br&gt;
  
          &lt;a href="#" class="small radius button"&gt;Call To Action!&lt;/a&gt;
        &lt;/div&gt;
  
        &lt;/div&gt;
        &lt;div class="large-6 small-6 columns"&gt;
  
          &lt;p&gt;Suspendisse ultrices ornare tempor. Aenean eget ultricies libero. Phasellus non ipsum eros. Vivamus at dignissim massa. Aenean dolor libero, blandit quis interdum et, malesuada nec ligula. Nullam erat erat, eleifend sed pulvinar ac. Suspendisse ultrices ornare tempor. Aenean eget ultricies libero.
        &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
        &lt;div class="large-4 columns hide-for-small"&gt;
  
        &lt;h4&gt;Get In Touch!&lt;/h4&gt;&lt;hr/&gt;
  
        &lt;a class="large button expand" href="#"&gt;
          Call To Action!
        &lt;/a&gt;
  
        &lt;a class="large button expand" href="#"&gt;
          Call To Action!
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;footer class="row"&gt;
      &lt;div class="large-12 columns"&gt;
      &lt;hr&gt;
        &lt;div class="row"&gt;
          &lt;div class="large-6 columns"&gt;
            &lt;p&gt;© Copyright Tune Studios.&lt;/p&gt;
         &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/footer&gt;
    &lt;script src="@{'public/javascripts/vendor/jquery.js'}"&gt;&lt;/script&gt;
    &lt;script src="@{'public/javascripts/foundation.min.js'}"&gt;&lt;/script&gt;
    &lt;script&gt;
        $(document).foundation();
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>