1

I try to make html.page with twitter bootstrap (NOT responsive). I grab code for html footer from here Flushing footer to bottom of the page, twitter bootstrap

But I've got some problems with it:

  1. Footer width on iPhone was less than content width. I fixed it adding min-width (see it in main2.css)
  2. Now I've got another problem: I've set viewport meta tag and disable bootstrap-responsive.css, but I don't understand why the entire page does not fit the screen on iPhone (it's kinda zoomed in)? How to zoom it out by default?
  3. I can't zoom it out. iPhone zoom it in after I stop zooming. I could delete viewport meta tag, but is there any other solution?

Here is a screenshot: Page zoomed in on iPhone (It's iOs simulator but on real phone it is the same)

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <!-- Le styles -->
        <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css" />
        <!-- <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css" /> -->
        <link rel="stylesheet" type="text/css" href="assets/css/main2.css" />
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!-- jquery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    </head>
    <body>
        <div id="wrap">
            <div id="main" class="container clear-top">
                <div class="row">
                    <div class="span12">
                        <p>Your content here. Your content here. Your content here</p>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="offset8 span4">
                        This is footer text. This is footer text. This is footer text. 
                    </div>
                </div>
            </div>
        </footer>
    </body>
</html>

main2.css:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
  background: green;
  width:100%;
  min-width: 940px; /*<-- this fixed footer width issue*/
}
Community
  • 1
  • 1
pupadupa
  • 1,530
  • 2
  • 17
  • 29

2 Answers2

0

I am amazed that you said that in POINT 1, you solved your proble by using min-width Instead of min-width you should write max-width as you want to restrict it to a certain width.

Jiteen
  • 429
  • 2
  • 6
  • 23
0

Change your viewport meta tag to:

<meta name="viewport" content="width=940, initial-scale=1.0, maximum-scale=1.0">
Chris Wheeler
  • 1,623
  • 1
  • 11
  • 18