Bootstrap Mobile View Not Loading

StackOverflow https://stackoverflow.com/questions/15466013

Question

How come when I load my app via a mobile device the h1 is cut off - I am using the Twitter BS:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        <link rel="stylesheet" type="text/css" href="css/custom.css" />
        <title>Birthday App</title>
        <script src=" https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
      <script src="cordova-2.5.0.js"></script>
      <script src="js/index.js"></script>
      <script src="js/app.js"></script>
      <script src="js/bootstrap.js"></script>
      <script>
        app.initialize();
      </script>
      </head>
<body ng-app="birthdayToDo" ng-controller="main">
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Birthday Reminders</h1>
        </div>
            <ul class="unstyled" ng-repeat="bday in bdays">
                <li>
                  <span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
                  <form ng-show="editing" ng-submit="editing = false">
                    <label>Name:</label>
                    <input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
                    <label>Date:</label>
                    <input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
                    <br/>
                    <button class="btn" type="submit">Save</button>
                    <button class="btn" type="button" ng-click="remove($index)">Delete</button>
                  </form>
                </li>

            </ul>

           <form ng-show="visible" ng-submit="newBirthday()">
            <label>Name:</label>
            <input type="text" ng-model="bdayname" placeholder="Name" ng-required/>
            <label>Date:</label>
            <input type="date" ng-model="bdaydate" placeholder="Date" ng-required/>
            <br/>
            <button class="btn" type="submit">Save</button>
          </form>
      </div>

      <div id="push"></div>
    </div>

    <div id="footer">
      <div class="container">
        <a class="btn" ng-click="visible = true"><i class="icon-plus"></i>Add</a>
      </div>
    </div>
    </body>
    </html>

enter image description here

Was it helpful?

Solution

The responsive stylesheet needs to override some styles in bootstrap.css. Including the bootstrap-responsive css after bootstrap.css should fix your issue.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top