I installed Twitter Bootstrap 3 using the bootstrap-sass gem, like I do on all my projects. However, on this project the breakpoints are being called incorrectly. I can't tell exactly what resolution it's rendering for my screen, but it's wrong. I had to custom set my breakpoints to smaller values in order to get it to work. I'm using the standard structure as follows:
In my application.html.haml
!!!
/ paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
/[if lt IE 7 ] <html class="ie6" lang="en">
/[if IE 7 ] <html class="ie7" lang="en">
/[if IE 8 ] <html class="ie8" lang="en">
/ [if (gte IE 9)|!(IE)]><!
%html{:lang => "en"}
/ <![endif]
%head
%meta{:charset => "utf-8"}/
/ Uncomment to make IE8 render like IE7
/ <meta http-equiv="X-UA-Compatible" content="IE=7" />
/ Set the viewport width to device width for mobile
%meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}/
%title= full_title(yield(:title))
= stylesheet_link_tag "application", 'http://fonts.googleapis.com/css?family=Lato:300|Grand+Hotel'
= csrf_meta_tags
/ |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
%body
.navigation
= render 'layouts/nav'
.wrapper
.flash
- flash.each do |key, value|
%div{:class => "alert-box alert-#{key}"}= value
= yield
= javascript_include_tag "application"
.footer
/ = render 'layouts/footer'
= debug(params) if Rails.env.development?
I then call on the bootstrap classes on each specific page (because I want to use full backgrounds and text that is offset) as follows:
home.html.haml
#textbox
.row
.col-xs-12.col-sm-12.col-md-10.col-lg-10.col-md-offset-1.col-lg-offset-1
content goes here
You can convert my haml to erb using this tool: http://www.haml-converter.com/. Aside from that, I really don't know what could be doing it. Perhaps it's because I call on bootstrap using @import "bootstrap"; in application.css.scss? I tried doing it using *= require but I was warned against doing so on the git repo. Additionally, when I did so, google fonts were not being loaded. Finally, it might be helpful to mention that when I originally created the project, I had issues with bootstrap where the .row was flowing over the maximum width of the window by about 15px on each side. I fixed this by setting margins on right and left of .row to 0.
Thank you for your help in advance, and all the best to you!
