I'm using bootstrap along with some custom css for my simple webpage. I have a fixed sidebar that keeps its position as the user scrolls through the #content div. However, when the webpage is viewed on a smartphone (or a the width of the browser gets smaller), the sidebar acts wonky instead of nicely occupying the top part of the website.
The behaviour I'm looking for is the same that Twitter's bootstrap site has. Decrease the width of your browser to see what I mean.
My current structure is like this:
<div class="span3" style="position:fixed">
// sidebar stuff
</div>
<div class="span8 offset3">
// content
</div>
You can use media queries for that.
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.
This media query expresses that the style sheet is usable on devices with viewport (the part of the screen/paper where the document is rendered) widths between 400 and 700 pixels:
@media screen and (min-width: 400px) and (max-width: 700px) { … }