CODEWITHSUNDEEP
cssresponsive-designzurb-foundation
nupac
nupac

Reputation: 2489

Zurb Foundation Mobile version not showing on mobile phones

So I have a site with Zurb Foundation, the css version along with my Play framework application(1.2.7). No Play code has been added yet. 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)

The url is http://thai-capital-lace.appspot.com

Code for my homepage is

#{set title:'Home' /}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="@{'public/stylesheets/css/foundation.css'}" />
</head>
<body>
<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">

      <h1><a href="@{MainController.homepage}"><img alt="" src="@{'public/images/logo.png'}" style="height:40px;width:40px;">  Thai Capital Lace</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="@{MainController.homepage}">Home</a></li>
      <li class=""><a href="@{MainController.products}">Products</a></li>
      <li class=""><a href="@{MainController.contact}">Contact Us</a></li>
    </ul>

    <!-- Left Nav Section -->
    <!-- <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
      <li><a href="#">Left Nav Button 2</a></li>
    </ul>
  </section> -->
</nav>

 <div class="row">
<div class="large-12 columns">



  <div class="hide-for-small">
    <div id="featured">
          <img src="http://placehold.it/1000x400&text=Slide Image" alt="slide image">

      </div>
    </div>

  <div class="row">
    <div class="small-12 show-for-small"><br>
      <img src="http://placehold.it/1000x600&text=For Small Screens"/>
    </div>
  </div>

  </div>
 </div><br>

 <div class="row">
   <div class="large-12 columns">
    <h5 class="panel">Our Best Sellers</h5>
    <div class="row">

    <div class="large-3 small-6 columns">
      <img src="http://placehold.it/250x250&text=Thumbnail"/>
      <h6 class="panel">Description</h6>
    </div>

    <div class="large-3 small-6 columns">
      <img src="http://placehold.it/250x250&text=Thumbnail"/>
      <h6 class="panel">Description</h6>
    </div>

    <div class="large-3 small-6 columns">
      <img src="http://placehold.it/250x250&text=Thumbnail"/>
      <h6 class="panel">Description</h6>
    </div>

    <div class="large-3 small-6 columns">
      <img src="http://placehold.it/250x250&text=Thumbnail"/>
      <h6 class="panel">Description</h6>
    </div>     
  </div>
</div>
</div>

 <div class="row">
 <div class="large-12 columns">
  <div class="row">

    <div class="large-8 columns">
      <div class="panel radius">

      <div class="row">
      <div class="large-6 small-6 columns">

        <h4>Header</h4><hr/>
        <h5 class="subheader">Risus ligula, aliquam nec fermentum vitae, sollicitudin eget urna. Donec dignissim nibh fermentum odio ornare sagittis.
        </h5>

      <div class="show-for-small" align="center">
        <a href="#" class="small radius button">Call To Action!</a><br>

        <a href="#" class="small radius button">Call To Action!</a>
      </div>

      </div>
      <div class="large-6 small-6 columns">

        <p>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.
      </p>
    </div>

    </div>
    </div>
    </div>

      <div class="large-4 columns hide-for-small">

      <h4>Get In Touch!</h4><hr/>

      <a class="large button expand" href="#">
        Call To Action!
      </a>

      <a class="large button expand" href="#">
        Call To Action!
      </a>
    </div>
  </div>
  </div>
  </div>

  <footer class="row">
    <div class="large-12 columns">
    <hr>
      <div class="row">
        <div class="large-6 columns">
          <p>© Copyright Tune Studios.</p>
       </div>
      </div>
    </div>
  </footer>
  <script src="@{'public/javascripts/vendor/jquery.js'}"></script>
  <script src="@{'public/javascripts/foundation.min.js'}"></script>
  <script>
      $(document).foundation();
  </script>
</body>
</html>

Upvotes: 2

Views: 1086

Answers (1)

Sudheer
Sudheer

Reputation: 2985

add this in head tag <meta name="viewport" content="width=device-width, initial-scale=1.0">

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600px or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%.

On mobile devices you can use a pinch gesture to zoom the pages in and out, but if you set the viewport to be the width of the device you don't need to zoom in to see the web page. To make sure that you web page isn't zoomed in when initially displayed you can use a property initial-scale to set the default zoom.

To make sure the user doesn't need to zoom-in when visiting your page set this to 1

Upvotes: 6

Related Questions