CODEWITHSUNDEEP
csshtmlresponsive-designzurb-foundation
s_curry_s
s_curry_s

Reputation: 3432

Mobile Layout with Foundation 4

I just started using the zurb foundation 4, for a mobile first app prototype. I am using Jade and I have my divs lined up like this. 

        div.large-3.small-12.columns
            <a href="#" class="button sendEmail">Send Email</a>
        div.large-6.small-9.columns 
            #list
        div.large-3.small-3.columns 
            div.Success.Label.cover Healtiest
            div.Regular.Label.cover Medium Health
            div.Alert.Label.cover Unhealty
            div.Secondary.Label.cover No Rating

My app is so far responsive on desktop, in other words if I make the browser window smaller the first div gets on top of the following two divs as soon as my browser window size is 768px. I want the same to happen on a mobile phone, but so far I tried with my Iphone 5 and I just see a zoomed out version of my full-size desktop layout

Full Size Desktop

768 px Desktop

Mobile

Upvotes: 2

Views: 319

Answers (1)

Dave Hilditch
Dave Hilditch

Reputation: 5439

You need to include the viewport meta tag.

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

e.g.

<meta name="viewport" content="width=device-width">

That should fix it.

Upvotes: 4

Related Questions