I am just getting into Rails and have already hit a big roadblock. I am starting with a simple view and navigating to /
renders everything fine, on the desktop view.
I have Bootstrap and Bootswatch running and everything seems to be fine until I open the mobile viewport in the Chrome dev tools. The site isn't responsive at all, but the styles are all there.
In Chrome dev tools, the media query is coming back as media="all"
in any viewport I choose. Strangely enough, when I navigate to /#
and then /
, on the mobile view, the desktop view just gets squished in and doesn't conform.
My Gemfile:
source 'http://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails'
# Use Bootswatch and Bootstrap for styling
gem 'bootswatch-rails'
gem 'bootstrap-sass'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', group: :doc
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
My application.css.scss: (Also is it supposed to be .sass or .scss, I tried both)
@import "bootstrap-sprockets";
@import "bootswatch/readable/variables";
@import "bootstrap";
@import "bootswatch/readable/bootswatch";
My application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
Any help would be appreciated, I have spent a solid 2 hours trying to get this to work!