From 67ee44b2fd1286eea0c2a977394f6e14c8e104f0 Mon Sep 17 00:00:00 2001
From: Jeff Johnson <jeff@classfill.com>
Date: Mon, 22 Oct 2012 14:28:23 -0500
Subject: [PATCH] Making site more responsive

Addresses #2
Addresses #1
---
 css/main.css  | 31 +++++++++++++++++++++++++++++--
 css/main.scss | 34 +++++++++++++++++++++++++++++++++-
 2 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/css/main.css b/css/main.css
index f00ddd9..0d90b07 100644
--- a/css/main.css
+++ b/css/main.css
@@ -291,8 +291,35 @@ a, a:visited, a:hover {
    Theses examples override the primary ('mobile first') styles.
    Modify as content requires.
    ========================================================================== */
-@media only screen and (min-width: 35em) {
-  /* Style adjustments for viewports that meet the condition */ }
+@media only screen and (max-width: 1200px) {
+  #container {
+    width: 100%; }
+
+  #nav-group {
+    width: 100%;
+    text-align: center; }
+    #nav-group a {
+      width: 15%;
+      margin-right: 5%;
+      margin-left: 5%;
+      font-size: 35px;
+      margin-top: 30px;
+      margin-bottom: 10px;
+      height: 40px;
+      text-align: left; }
+
+  #container.sticky #nav-group a {
+    font-size: 25px; } }
+@media only screen and (max-width: 650px) {
+  /* Style adjustments for viewports that meet the condition */
+  .photo-display {
+    float: none; }
+
+  .subsection .copy {
+    width: 100%; }
+
+  #container.sticky #nav-group a {
+    font-size: 20px; } }
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
   /* Style adjustments for high resolution devices */ }
 /* ==========================================================================
diff --git a/css/main.scss b/css/main.scss
index 017819a..13ec6cb 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -338,9 +338,41 @@ a, a:visited, a:hover {
    Theses examples override the primary ('mobile first') styles.
    Modify as content requires.
    ========================================================================== */
+@media only screen and (max-width: 1200px) {
+      #container {
+        width: 100%;
+    }
+    #nav-group {
+        width: 100%;
+        text-align: center;
+        a {
+            width: 15%;
+            margin-right: 5%;
+            margin-left: 5%;
+            font-size: 35px;
+            margin-top: 30px;
+            margin-bottom: 10px;
+            height: 40px;
+            text-align: left;
+        }
+    }
+    #container.sticky #nav-group a {
+        font-size: 25px;
+    }
+}
 
-@media only screen and (min-width: 35em) {
+@media only screen and (max-width: 650px) {
     /* Style adjustments for viewports that meet the condition */
+    .photo-display {
+        float: none;
+    }
+    .subsection .copy {
+        width: 100%;
+    }
+  
+    #container.sticky #nav-group a {
+        font-size: 20px;
+    }
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),