Twitter-bootstrap – Twitter Bootstrap is too wide for mobile

twitter-bootstrap

I did a simple design for my site using Twitter Bootstrap. Code is as follows:

<!DOCTYPE html>

<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="pl-PL"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="pl-PL"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="pl-PL"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="pl-PL"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="pl-PL"><!--<![endif]-->

<head>

    <meta charset="UTF-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
    <title></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="http://localhost/images/fav.ico">
    <link rel="stylesheet" href="http://localhost/bootstrap.css">
    <link rel="stylesheet" href="http://localhost/style.css">

    <!--[if lt IE 9]>
    <script src="http://localhost/js/html5shiv.js"></script>
    <script src="http://localhost/js/respond.js"></script>
    <![endif]-->


    <link rel="alternate" type="application/rss+xml" title=" &raquo; Kanał z wpisami" href="http://localhost/feed/" />
<link rel="alternate" type="application/rss+xml" title=" &raquo; Kanał z komentarzami" href="http://localhost/comments/feed/" />
<link rel='stylesheet' id='contact-form-7-css'  href='http://localhost/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.2' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<style type="text/css">
sup {
    vertical-align: 60%;
    font-size: 75%;
    line-height: 100%;
}
sub {
    vertical-align: -10%;
    font-size: 75%;
    line-height: 100%;
}
.amp {
    font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif;
    font-weight: normal;
    font-style: italic;
    font-size: 1.1em;
    line-height: 1em;
}
.caps {
    font-size: 90%;
}
.dquo {
    margin-left:-.40em;
}
.quo {
    margin-left:-.2em;
}
/* because formatting .numbers should consider your current font settings, we will not style it here */
</style>
    <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
</head>

<body class="home blog">    
    <div id="wrap" class="container">
        <!-- #header -->
        <header id="header" class="span12">
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="container">
                        <h1 class="brand"><a href="http://localhost"></a></h1>
                        <div class="nav-collapse collapse hidden-mobile">
                            <ul class="nav pull-right">
                                <li><a href="#about" title="O mnie">O mnie</a></li>
                                <li><a href="#showcase" title="Realizacje">Realizacje</a></li>
                                <li><a href="#contact" title="FAQ / Kontakt">FAQ i kontakt</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- /#header -->


<!-- #slider -->
<section id="slider" class="hidden-phone carousel slide">
    <div>
        <article class="item"></article>
        <article class="item"></article>
    </div>
</section>


    </div>

    <script type='text/javascript' src='http://localhost/wp-content/plugins/contact-form-7/includes/js/jquery.form.js?ver=3.09'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = {"loaderUrl":"http:\/\/192.168.1.2\/\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"Wysy\u0142anie..."};
/* ]]> */
</script>
<script type='text/javascript' src='http://localhost/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=3.2'></script>
<script src="http://localhost/js/jquery.js"></script>
<script src="http://localhost/js/bootstrap.min.js"></script>
<script src="http://localhost/js/plugins.js"></script>
<script src="http://localhost/js/script.js"></script>

<!--

<script>

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXX-XX']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
-->

</body>

</html>

I did include Bootstrap's both css files (combined into one – bootstrap.css first and bootstrap-responsive.css next) and bootstrap.js on the bottom. But I have a very weird problem (first time since I use Twitter Bootstrap) – on my phone (Huawei Ascend) body is too wide (no matter the orientation). It seemed like it has some padding – so I removed body's padding, but it didn't help. Problem is visible even if I remove my CSS and keep only Bootstrap's.

Best Answer

The Bootstrap version was not specified in the question, although it was posted before the release of v3.0.

In any case, if anyone happens to come across this topic and has this same problem with v3.x, here's what I did. YMMV depending on whether or not your .container divs come directly below <body> or not..

/* Fix for viewport being too wide below smallest breakpoint */
@media (max-width: 767px) {
    body > .container { overflow: hidden; } /* fix */
    body > .container > * { overflow: visible; } /* reset back to normal */
}
Related Topic