updated jqzoom and products compare page is responsive now

2013-12-02 16:41:13 +02:00
parent c8ca67eef5
commit f99140113b
9 changed files with 1056 additions and 101 deletions
@@ -109,4 +109,99 @@ table#product_comparison {
 .ie8 table#product_comparison .product-image-block .product_image img {
 	width:auto;
 }
-.footer_link { margin-bottom:20px;}
+.footer_link { margin-bottom:20px;}
+
+
+#product_comparison{
+    .comparison_feature{
+      .product_name{display: none;}
+    }
+  }
+
+@media (max-width: 992px) {
+  #columns table#product_comparison{
+    tbody tr td.td_empty span {
+      font-size: 14px;
+    }
+    tbody tr td.product-block {
+      padding: 14px;
+    } 
+    .button.ajax_add_to_cart_button, .button.lnk_view{
+      font-size: 14px;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  #product_comparison table, 
+  #product_comparison thead, 
+  #product_comparison tbody, 
+  #product_comparison th, 
+  #product_comparison td, 
+  #product_comparison tr {display: block;}
+
+  #product_comparison thead tr {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+  #product_comparison tr {
+    overflow: hidden;
+    &:last-child{
+      border-bottom: none;
+      td{
+        border-bottom: none;
+      }
+    }
+  }
+
+  #product_comparison td {
+    border: none;
+    position: relative;
+    white-space: normal;
+    float: left;
+    width: 33.33%;
+    &.td_empty{
+      width: 100% !important;
+      clear: both; 
+    }
+    &:last-child{
+      border-bottom: none;
+    }
+  }
+
+  #product_comparison{
+    .comparison_feature{
+      .feature-name{
+        width: 100%;
+        float: none;
+        clear: both;
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  #product_comparison td {
+    float: none;
+    width: 100%;
+  }
+
+  #product_comparison{
+    .comparison_feature{
+      td{
+        float: left;
+        width: 50%;
+      }
+      .feature-name{
+        width: 100%;
+        clear: both;
+      }
+      .product-name{
+        width: 50%;
+        float: left;
+        display: block;
+      }
+    }
+  }
+}