Merge branch 'fix-issues'

Leonardo Merlin
2 parents 026c9ba2 73c707c6
Showing 1 changed file with 34 additions and 5 deletions Show diff stats
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 {
	@@ -108,13 +108,26 @@ $article-box-space: 20px;		@@ -108,13 +108,26 @@ $article-box-space: 20px;
108		108
109	&--image-wrapper {	109	&--image-wrapper {
110	position: relative;	110	position: relative;
111	- // width: 100%;
112	- // width: 370px;
113	- // height: 170px;
114	-
115	overflow: hidden;	111	overflow: hidden;
116	- // text-align: center;	112	+
		113	+ margin-bottom: 10px;
117	min-height: 170px;	114	min-height: 170px;
		115	+
		116	+ @media screen and (max-width: $screen-lg) {
		117	+ min-height: 135px;
		118	+ }
		119	+
		120	+ @media screen and (max-width: $screen-md) {
		121	+ min-height: 90px;
		122	+ }
		123	+
		124	+ @media screen and (max-width: $screen-sm) {
		125	+ min-height: 220px;
		126	+ }
		127	+
		128	+ @media screen and (max-width: $screen-xs) {
		129	+ min-height: 180px;
		130	+ }
118	}	131	}
119		132
120	&--image {	133	&--image {
	@@ -127,6 +140,22 @@ $article-box-space: 20px;		@@ -127,6 +140,22 @@ $article-box-space: 20px;
127	-moz-transition: all $time ease-in-out;	140	-moz-transition: all $time ease-in-out;
128	-o-transition: all $time ease-in-out;	141	-o-transition: all $time ease-in-out;
129	transition: all $time ease-in-out;	142	transition: all $time ease-in-out;
		143	+
		144	+ @media screen and (max-width: $screen-lg) {
		145	+ min-height: 135px;
		146	+ }
		147	+
		148	+ @media screen and (max-width: $screen-md) {
		149	+ min-height: 90px;
		150	+ }
		151	+
		152	+ @media screen and (max-width: $screen-sm) {
		153	+ min-height: 220px;
		154	+ }
		155	+
		156	+ @media screen and (max-width: $screen-xs) {
		157	+ min-height: 170px;
		158	+ }
130	}	159	}
131		160
132	.button--themed {	161	.button--themed {