Merge pull request #486 from ConvertKit/broadcasts-responsive-css

Broadcasts: Add responsive CSS
Kit · Jun 5, 2023 · 9071600 · 9071600
2 parents 8aa1e26 + 8c8ac06
commit 9071600
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/resources/frontend/css/broadcasts.css b/resources/frontend/css/broadcasts.css
@@ -29,6 +29,16 @@
 	grid-template-columns: 150px auto;
 	grid-column-gap: 20px;
 }
+@media screen and (max-width: 478px) {
+	.convertkit-broadcasts-list li {
+		grid-template-areas:
+			"image image"
+			"date date"
+			"title title"
+			"text text";
+		grid-row-gap: 10px;
+	}
+}
 
 /**
  * Grid View.
@@ -52,6 +62,16 @@
 .convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list li .convertkit-broadcast-read-more {
 	margin: 10px 0 0 0;
 }
+@media screen and (max-width: 768px) {
+	.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+@media screen and (max-width: 478px) {
+	.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list {
+		grid-template-columns: repeat(1, 1fr);
+	}
+}
 
 /**
  * Broadcast Item
@@ -85,6 +105,11 @@
 .convertkit-broadcasts-list li .convertkit-broadcast-read-more {
 	display: block;
 }
+@media screen and (max-width: 478px) {
+	.convertkit-broadcasts[data-display-image="1"] .convertkit-broadcasts-list li {
+		margin: 0 0 20px 0;
+	}
+}
 
 /**
  * Pagination