Various style fixes. Fixes #42

spree-contrib · Sep 13, 2013 · db21232 · db21232
1 parent addb377
commit db21232
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/app/assets/stylesheets/store/shared/_layout.scss b/app/assets/stylesheets/store/shared/_layout.scss
@@ -113,10 +113,6 @@ body {
   margin-bottom: 30px;
 }
 
-ul#products {
-  max-width: 600px;
-}
-
 ul#products li {
   margin-bottom: 20px;
 
@@ -132,13 +128,12 @@ ul#products li {
 
   .product-image {
     border: none;
-    min-height: 155px;
+    min-height: 245px;
     padding: 0;
 
     a {
       border-color: lighten($c_blue, 30);
       border-width: 2px;
-      padding: 30px 22px 30px 20px;
       float: none;
 
       img {

diff --git a/app/assets/stylesheets/store/shared/_media.scss b/app/assets/stylesheets/store/shared/_media.scss
@@ -1,5 +1,17 @@
 @media only screen and (min-width: 768px) and (max-width: 959px) {
   body {
+    #product-images #main-image {
+      width: 270px;
+      height: 270px;
+
+      img {
+        width: 90%;
+        height: 90%;
+        min-height: 90%;
+        max-width: 90%;
+        padding: 10px 0 0 0;
+      }
+    }
 
     .carousel li.four.columns {
       width: 240px !important;
@@ -44,7 +56,11 @@
 
     ul#products {
       .product-image {
+        min-height: 165px;
+
         a {
+          padding: 30px;
+
           img {
             width: 100px;
             height: 100px;
@@ -100,6 +116,7 @@
 
 @media only screen and (max-width: 767px) {
   body {
+
     #header {
       margin-bottom: 10px;
     }
@@ -266,6 +283,8 @@
         font-weight: 600;
       }
       .product-image {
+        min-height: 155px;
+
         a {
           padding: 18px 12px 18px 10px;
 
@@ -385,6 +404,10 @@
 @media only screen and (min-width: 480px) and (max-width: 767px) {
   body {
 
+    #home-slider .product-image a {
+      margin-top: 30px
+    }
+
     #search-bar form {
       right: 120px;
     }
@@ -404,7 +427,7 @@
     }
 
     #subheader .subheader-wrapper h1 {
-      text-align: left;
+      text-align: center;
     }
 
     #mobile-navigation:target {
@@ -481,6 +504,10 @@
 }
 @media only screen and (max-width: 480px) {
   body {
+    #home-slider .product-image a {
+      margin-top: 30px
+    }
+
     #update-cart .coupon-code-field {
       width: 300px !important;
     }