From 73c707c6c935c5bf06298233a378058881b0cad3 Mon Sep 17 00:00:00 2001
From: Leonardo Merlin <leonardo.merlin@serpro.gov.br>
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