Responsive CSS with Twitter Bootstrap

Responsive CSS with Twitter Bootstrap

In my Rails app, I'm using Twitter Bootstrap. My footer is properly
displayed on screens with landscape mode with width required enough.
Here is how it looks:

But, on a browser on my Android Galaxy Note, it appears broken. The footer
appears correct if I use the browser in landscape mode, but in the
portrait mode it breaks. It looks like:

Here is my code:
<div id="footer">
<div class="container">
<p class="muted credit" style="text-align: center" >
&copy; 2013 <a href="http://www.example.com">WebsiteName.com</a>
All Rights Reserved. |
<a href="" title="Privacy Policy">Privacy Policy</a> |
<%= link_to 'Terms of Service', terms_of_service_path %>
</p>
</div>
</div>
The CSS for the above is borrowed from Example - sticky-footer :
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
position: fixed;
left:0;
top:0;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
.container .credit {
margin: 20px 0;
}
I don't know why does it not render it correctly. I am new to the
Responsive CSS and I am learning. Please let me know what's wrong.