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
@@ -94,3 +94,86 @@ table#product_comparison .product-rating {
 .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;
+  }
+  #columns table#product_comparison tbody tr td.product-block {
+    padding: 14px;
+  }
+  #columns table#product_comparison .button.ajax_add_to_cart_button, #columns table#product_comparison .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;
+  }
+  #product_comparison tr:last-child {
+    border-bottom: none;
+  }
+  #product_comparison tr:last-child td {
+    border-bottom: none;
+  }
+
+  #product_comparison td {
+    border: none;
+    position: relative;
+    white-space: normal;
+    float: left;
+    width: 33.33%;
+  }
+  #product_comparison td.td_empty {
+    width: 100% !important;
+    clear: both;
+  }
+  #product_comparison td: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%;
+  }
+  #product_comparison .comparison_feature .feature-name {
+    width: 100%;
+    clear: both;
+  }
+  #product_comparison .comparison_feature .product-name {
+    width: 50%;
+    float: left;
+    display: block;
+  }
+}