As you may have read, we are following the popular Ruby On Rails tutorial and are on Chapter 5 Filing in the Layout. In this post we’ll step through taking advantage of the twitter bootstrap’s build in feature of responsiveness.
Chapter 5 steps you through integrating twitter bootstrap and, your site starts looking like the real deal. Responsive design isn’t covered in the tutorial, since bootstrap supports responsiveness I wanted to add it. A responsive site is important because it’s another “freebie” that can wow your clients w/o much effort.
In app/assets/stylesheets/custom.css.scss, you have already added an import line for boostrap, next just add a line for the responsive part of bootstrap
@import "bootstrap"; @import "bootstrap-responsive";
Next, remember there was a problem with the hero-unit falling under the header? The tutorial solves it by adding a statically sized padding in app/assets/stylesheets/custom.css.scss.
body {
padding-top: 60px;
}
We need to make the padding size dynamic, based on window size. Replace the static padding with the css below. This tip comes from stack overflow.
@media (min-width: 979px) {
body {
padding-top: 60px;
}
}
Finally, we need to tell mobile browsers how to display our site. Read more about viewport meta tag here.
<meta name="viewport" content="width=device-width , initial-scale=1.0" />
And that’s it. Your rails app should now be responsive.
tech brown bags 
Pingback: tech brown bags | Rails 4 – Changing Colors In Twitter Bootstrap
Pingback: tech brown bags | Rails 4 – Responsive Design, Another Way
Pingback: tech brown bags | Rails 4 – Bootswatch Rails Gem