From dcf6704974edc6822042557184991dbdc3644d43 Mon Sep 17 00:00:00 2001 From: Laury GvR Date: Thu, 21 Apr 2016 15:55:41 -0400 Subject: [PATCH] Related product width/height adjusted --- css/app.css | 28 +++++++++++++++++++++++----- scss/plugins/_woocommerce.scss | 30 +++++++++++++++++++++++++----- 2 files changed, 48 insertions(+), 10 deletions(-) diff --git a/css/app.css b/css/app.css index a28a818..64d1177 100644 --- 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 --- 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; } -- 2.17.1