updates for media query to support diff in smaller devices

jleajones · Nov 3, 2015 · c1fba19 · c1fba19
1 parent cdac6ab
commit c1fba19
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/_sass/_cards.scss b/_sass/_cards.scss
@@ -63,12 +63,22 @@
         }
 
         @include media-query($on-palm) {
+            width: 100%;
+            margin-right: 0;
+            height: 325px;
+
+            figcaption {
+                top: 150px;
+            }
+        }
+
+        @include media-query($on-palm-lg) {
             width: 100%;
             margin-right: 0;
             height: 345px;
 
             figcaption {
-                top: 177px;
+                top: 188px;
             }
         }
     }

diff --git a/_sass/_header.scss b/_sass/_header.scss
@@ -37,7 +37,10 @@ body > header {
             line-height: 47px;
             padding: 0 16px;
         }
-        @include media-query($on-palm) {
+
+
+
+        @include media-query($on-palm-lg) {
             position: absolute;
             top: 16px;
             right: 30px;

diff --git a/css/main.scss b/css/main.scss
@@ -90,7 +90,12 @@ $categories: coding $coding-color, general $general-color, photography $photogra
 // Width of the content area
 $content-width:    1000px;
 
-$on-palm:          760px;
+//iphone 5
+$on-palm:          320px;
+
+//iphone 6
+$on-palm-lg:       415px;
+
 $on-laptop:        1024px;
 
 // Using media queries with like this: