From 73c707c6c935c5bf06298233a378058881b0cad3 Mon Sep 17 00:00:00 2001 From: Leonardo Merlin Date: Fri, 20 Nov 2015 10:48:06 -0200 Subject: [PATCH] Improve responsivity of images (issue #34) --- src/app/components/article-box/article-box.scss | 39 ++++++++++++++++++++++++++++++++++----- 1 file changed, 34 insertions(+), 5 deletions(-) diff --git a/src/app/components/article-box/article-box.scss b/src/app/components/article-box/article-box.scss index 17d0dd9..4c58b69 100644 --- a/src/app/components/article-box/article-box.scss +++ b/src/app/components/article-box/article-box.scss @@ -108,13 +108,26 @@ $article-box-space: 20px; &--image-wrapper { position: relative; - // width: 100%; - // width: 370px; - // height: 170px; - overflow: hidden; - // text-align: center; + + margin-bottom: 10px; min-height: 170px; + + @media screen and (max-width: $screen-lg) { + min-height: 135px; + } + + @media screen and (max-width: $screen-md) { + min-height: 90px; + } + + @media screen and (max-width: $screen-sm) { + min-height: 220px; + } + + @media screen and (max-width: $screen-xs) { + min-height: 180px; + } } &--image { @@ -127,6 +140,22 @@ $article-box-space: 20px; -moz-transition: all $time ease-in-out; -o-transition: all $time ease-in-out; transition: all $time ease-in-out; + + @media screen and (max-width: $screen-lg) { + min-height: 135px; + } + + @media screen and (max-width: $screen-md) { + min-height: 90px; + } + + @media screen and (max-width: $screen-sm) { + min-height: 220px; + } + + @media screen and (max-width: $screen-xs) { + min-height: 170px; + } } .button--themed { -- libgit2 0.21.2