Skip to content

Loading…

Added responsive stylesheet #1

Closed
wants to merge 2 commits into from

2 participants

@mrdougwright

It's a start. Should look better on Mobile and iPads. If it's not working on the actual device (I only checked on my laptop browser), I think there is a meta tag you can add to the layout to make it work. Something like this, but I wasn't sure how to add it with Haml:

meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"

@mrdougwright

Should probably keep the 'only' part to support IE 8.

Need to add this meta tag to layouts:
<meta name="viewport" content="width=device-width">

@michaeleconomy

you need to change the sass file not the css file (as it will be overwritten).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Aug 18, 2013
  1. @mrdougwright

    Added responsive stylesheet

    mrdougwright committed
  2. @mrdougwright

    update css to be more DRY

    mrdougwright committed
Showing with 84 additions and 0 deletions.
  1. +1 −0 .gitignore
  2. +82 −0 app/assets/stylesheets/responsive.css
  3. +1 −0 app/views/layouts/application.html.haml
View
1 .gitignore
@@ -5,3 +5,4 @@ log/*.log
tmp/**/*
tmp/
.sass-cache/**/*
+gamerankr_dev.sql
View
82 app/assets/stylesheets/responsive.css
@@ -0,0 +1,82 @@
+@media screen and (max-width: 1024px) {
+ #header {
+ width: auto;
+ }
+ #header img {
+ width: 120px;
+ }
+ #header .nav {
+ font-size: 1.25em;
+ padding: 7px;
+ }
+ #header .nav a {
+ display: inline-block;
+ }
+ #header .nav a:first-child {
+ display: none;
+ }
+ #header form {
+ padding: 10px;
+ }
+ #main {
+ width: auto;
+ padding: 0;
+ }
+ #main .left20 {
+ width: 30%;
+ }
+ #main .right80 {
+ width: 70%;
+ }
+
+ #main .left30 {
+ margin: 10px;
+ }
+ #main .left30 .sx250 {
+ max-width: 200px;
+ }
+
+ #main .left70 {
+ width: 60%;
+ margin: 20px;
+ float: left;
+ display: inline-block;
+ }
+ #main .left50 {
+ width: 100%;
+ margin-bottom: 5px;
+ }
+ #main .right50 {
+ width: 100%;
+ margin: 5px;
+ }
+ #footer {
+ width: auto;
+ }
+}
+
+@media screen and (max-width: 480px) {
+
+ #header img {
+ width: 90px;
+ }
+
+ #main .carousel {
+ display: none;
+ }
+ #main .left20 {
+ width: 40%;
+ }
+ #main .right80 {
+ width: 60%;
+ }
+
+ #main .left30 {
+ margin: 5px;
+ }
+
+ #main .left70 {
+ width: 95%;
+ margin: 5px;
+ }
+}
View
1 app/views/layouts/application.html.haml
@@ -5,6 +5,7 @@
GameRankr -
= @title || "Rate and Review Video Games With Friends"
= stylesheet_link_tag "application"
+ = stylesheet_link_tag "responsive"
= csrf_meta_tag
= render "layouts/metatags"
%body
Something went wrong with that request. Please try again.