Related product width/height adjusted

diff --git a/css/app.css b/css/app.css
index a28a818..64d1177 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6957,7 +6957,7 @@ main.woocommerce, div.woocommerce {
     margin: 12px 0 0;
     padding: 8px 28px;
     border: 1px solid transparent; }
-    @media only screen and (max-width: 40em) {
+    @media only screen and (min-width:0em) and (max-width:64em) {
       main.woocommerce #content .product.type-product .single_add_to_cart_button, div.woocommerce #content .product.type-product .single_add_to_cart_button {
         float: none; } }
     main.woocommerce #content .product.type-product .single_add_to_cart_button:hover, main.woocommerce #content .product.type-product .single_add_to_cart_button:focus, div.woocommerce #content .product.type-product .single_add_to_cart_button:hover, div.woocommerce #content .product.type-product .single_add_to_cart_button:focus {
@@ -7024,6 +7024,9 @@ main.woocommerce, div.woocommerce {
     main.woocommerce #content .product.type-product .price.price-single span, div.woocommerce #content .product.type-product .price.price-single span {
       color: black;
       font-size: 22px; }
+    @media only screen and (min-width:0em) and (max-width:64em) {
+      main.woocommerce #content .product.type-product .price.price-single, div.woocommerce #content .product.type-product .price.price-single {
+        text-align: center; } }
   main.woocommerce #content .product.type-product .stock, div.woocommerce #content .product.type-product .stock {
     color: black;
     float: right;
@@ -7119,7 +7122,11 @@ main.woocommerce, div.woocommerce {
         main.woocommerce .main.woo-single-product #content .related ul.products li.product:last-child, main.woocommerce .main.woo-single-product #content .related ul.products li.product, div.woocommerce .main.woo-single-product #content .related ul.products li.product:last-child, div.woocommerce .main.woo-single-product #content .related ul.products li.product {
           width: 50%; } }
       main.woocommerce .main.woo-single-product #content .related ul.products li.product:last-child img, main.woocommerce .main.woo-single-product #content .related ul.products li.product img, div.woocommerce .main.woo-single-product #content .related ul.products li.product:last-child img, div.woocommerce .main.woo-single-product #content .related ul.products li.product img {
-        height: 150px; }
+        padding-right: 0;
+        max-height: 172px;
+        max-width: 207px;
+        padding-right: 15px;
+        width: 100%; }
       main.woocommerce .main.woo-single-product #content .related ul.products li.product:last-child [itemprop="description"], main.woocommerce .main.woo-single-product #content .related ul.products li.product [itemprop="description"], div.woocommerce .main.woo-single-product #content .related ul.products li.product:last-child [itemprop="description"], div.woocommerce .main.woo-single-product #content .related ul.products li.product [itemprop="description"] {
         display: none; }
       main.woocommerce .main.woo-single-product #content .related ul.products li.product:last-child .price span.amount, main.woocommerce .main.woo-single-product #content .related ul.products li.product .price span.amount, div.woocommerce .main.woo-single-product #content .related ul.products li.product:last-child .price span.amount, div.woocommerce .main.woo-single-product #content .related ul.products li.product .price span.amount {
@@ -7154,16 +7161,24 @@ main.woocommerce, div.woocommerce {
         margin-bottom: 20px; }
         main.woocommerce #content ul.products li.product.type-product .variations_form .variations, div.woocommerce #content ul.products li.product.type-product .variations_form .variations {
           float: right; }
-      @media only screen and (max-width: 40em) {
-        main.woocommerce #content ul.products li.product.type-product, div.woocommerce #content ul.products li.product.type-product {
-          margin-bottom: 25px; } }
+          @media only screen and (min-width:0em) and (max-width:64em) {
+            main.woocommerce #content ul.products li.product.type-product .variations_form .variations, div.woocommerce #content ul.products li.product.type-product .variations_form .variations {
+              float: none; } }
       main.woocommerce #content ul.products li.product.type-product h3, div.woocommerce #content ul.products li.product.type-product h3 {
         font-size: 16px;
         text-align: left;
         padding: 10px 0 0; }
+      @media only screen and (min-width:0em) and (max-width:64em) {
+        main.woocommerce #content ul.products li.product.type-product, div.woocommerce #content ul.products li.product.type-product {
+          margin-bottom: 25px; }
+          main.woocommerce #content ul.products li.product.type-product h3, div.woocommerce #content ul.products li.product.type-product h3 {
+            text-align: center; } }
       main.woocommerce #content ul.products li.product.type-product .product-list-link, div.woocommerce #content ul.products li.product.type-product .product-list-link {
         display: block;
         height: 220px;
+        float: none;
+        margin: 0 auto;
+        max-width: 266px;
         overflow: hidden;
         border: 1px solid lightgrey;
         border-radius: 2px; }
@@ -7210,6 +7225,9 @@ main.woocommerce, div.woocommerce {
         float: right;
         margin-left: 5px;
         color: #0f789f; }
+        @media only screen and (min-width:0em) and (max-width:64em) {
+          main.woocommerce #content ul.products li.product.type-product .more, div.woocommerce #content ul.products li.product.type-product .more {
+            float: none; } }
       main.woocommerce #content ul.products li.product.type-product .products-qty-contain span, div.woocommerce #content ul.products li.product.type-product .products-qty-contain span {
         margin-left: 5px; }
       main.woocommerce #content ul.products li.product.type-product .cart, div.woocommerce #content ul.products li.product.type-product .cart {

diff --git a/scss/plugins/_woocommerce.scss b/scss/plugins/_woocommerce.scss
index d4462af..8a601f4 100644 (file)
--- a/scss/plugins/_woocommerce.scss
+++ b/scss/plugins/_woocommerce.scss
@@ -599,7 +599,7 @@ div.woocommerce {
             border-radius: 3px;
             clear: both;
             float: right;
-            @media #{$small-only} {
+            @media #{$medium-down} {
                 float:none;
             }
             background: rgba(0, 0, 0, 0) url("../assets/repeating-pattern.jpg") repeat scroll 0 0;
@@ -688,6 +688,9 @@ div.woocommerce {
                 color: black;
                 font-size: 22px;
             }
+            @media #{$medium-down} {
+                text-align: center;
+            }
         }
         .stock {
             color: black;
@@ -823,7 +826,11 @@ div.woocommerce {
             margin: 0;
             height: 300px;
             img {
-                height: 150px;
+                padding-right: 0;
+                max-height: 172px;
+                max-width: 207px;
+                padding-right: 15px;
+                width: 100%;
             }
             [itemprop="description"] {
                 display: none;
@@ -870,19 +877,28 @@ div.woocommerce {
                 margin-bottom: 20px;
                 .variations {
                     float: right;
+                    @media #{$medium-down} {
+                        float: none;
+                    }
                 }
             }
-            @media #{$small-only} {
-                margin-bottom: 25px;
-            }
             h3 {
                 font-size: 16px;
                 text-align: left;
                 padding: 10px 0 0;
             }
+            @media #{$medium-down} {
+                margin-bottom: 25px;
+                h3 {
+                    text-align: center;
+                }
+            }
             .product-list-link {
                     display: block;
                     height:220px;
+                    float: none;
+                    margin: 0 auto;
+                    max-width: 266px;
                     overflow: hidden;
                     border: 1px solid lightgrey;
                     border-radius: 2px;
@@ -940,6 +956,10 @@ div.woocommerce {
             .more {
                 display: inline;
                 float: right;
+                
+                @media #{$medium-down} {
+                    float: none;
+                }
                 margin-left: 5px;
                 color: $blue;
             }