Merge pull request #40 from hlxsites/feature/gridLayout

fixing the gap
hlxsites · Dec 8, 2023 · ec00e88 · ec00e88
2 parents 95bf47f + e7aff1d
commit ec00e88
Showing 1 changed file with 25 additions and 13 deletions.
diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.css b/cigaradvisor/blocks/article-teaser/article-teaser.css
@@ -30,12 +30,6 @@
   padding-bottom: 20px;
 }
 
-@media screen and (min-width: 60em) {
-  .article-teaser.block .article.article-thumbnail {
-    min-height: 26.25rem;
-  }
-}
-
 .article-teaser.block .article-category {
   position: absolute;
   top: 20px;
@@ -95,7 +89,7 @@
   display: flex;
   align-items: flex-start;
   flex: 1 0 13rem;
-  width: 100%;
+  width: 100%;  
 }
 
 .article-teaser.block .article.article-thumbnail .article-image>img {
@@ -142,12 +136,6 @@
   display: block;
 }
 
-@media screen and (min-width: 60em) {
-  .article-teaser.block .article.article-thumbnail .article-header {
-    min-height: 140px
-  }
-}
-
 .article-teaser.block .article.article-thumbnail .article-title {
   margin: 0 14px 16px;
   font-size: 18px;
@@ -284,4 +272,28 @@
   justify-content: center;
   color: #b19b5e;
   font-size: 18px;
+}
+
+@media screen and (min-width: 600px) {
+  .article-teaser.block .article.article-thumbnail .article-header {
+    flex-grow: 0.2;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  .article-teaser.block .article.article-thumbnail .article-header {
+    flex-grow: 0;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .article-teaser.block .article.article-thumbnail .article-header {
+    min-height: 140px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .article-teaser.block .article.article-thumbnail {
+    min-height: 26.25rem;
+  }
 }