From 5b5a1d50ffb564bf071a1db0941005bae60895d8 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Mon, 28 Oct 2019 18:21:26 -0400
Subject: [PATCH] Pledge List: Fix grid layout for small screens

---
 .../css/components/_pledge-list.scss          | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/themes/wporg-5ftf/css/components/_pledge-list.scss b/themes/wporg-5ftf/css/components/_pledge-list.scss
index a7881d4..3c9e227 100644
--- a/themes/wporg-5ftf/css/components/_pledge-list.scss
+++ b/themes/wporg-5ftf/css/components/_pledge-list.scss
@@ -58,24 +58,36 @@ body.archive.post-type-archive-5ftf_pledge {
 	
 	/* Structure */
 	article {
-		display: grid;
-		grid-template-columns: 330px auto;
 		margin-bottom: ms(12);
 
 		.entry-image {
-			grid-column: 1;
-			grid-row: 1 / span 2;
-			margin-right: ms(8);
+			margin-bottom: ms(4);
 		}
 
-		.entry-header {
-			grid-column: 2;
-			grid-row: 1;
-		}
+		@include breakpoint( $breakpoint-small ) {
+			display: grid;
+			grid-template-columns: 200px auto;
 
-		.entry-content {
-			grid-column: 2;
-			grid-row: 2;
+			.entry-image {
+				grid-column: 1;
+				grid-row: 1 / span 2;
+				margin-bottom: 0;
+				margin-right: ms(8);
+			}
+
+			.entry-header {
+				grid-column: 2;
+				grid-row: 1;
+			}
+
+			.entry-content {
+				grid-column: 2;
+				grid-row: 2;
+			}
+		}
+		
+		@include breakpoint( $breakpoint-tablet ) {
+			grid-template-columns: 330px auto;
 		}
 	}