fix: breakpoints and grid-template-columns

Automattic · Mar 25, 2022 · 4e8491e · 4e8491e
1 parent 92ce3e4
commit 4e8491e
Showing 1 changed file with 11 additions and 8 deletions.
diff --git a/src/blocks/donate/view.scss b/src/blocks/donate/view.scss
@@ -398,12 +398,12 @@
 
 			~ .tiers {
 				display: grid;
-				grid-gap: 0.56rem;
-				grid-template-columns: repeat( 2, 1fr );
+				grid-gap: 0.28rem;
+				grid-template-columns: repeat( 4, 1fr );
 				margin: 1.12rem;
 
-				@include media( tablet ) {
-					grid-template-columns: repeat( 4, 1fr );
+				@include media( mobile ) {
+					grid-gap: 0.56rem;
 				}
 			}
 		}
@@ -555,12 +555,15 @@
 			}
 
 			~ .tiers {
-				display: grid;
-				grid-gap: 0.56rem;
-				grid-template-columns: repeat( 2, 1fr );
+				display: flex;
+				flex-wrap: wrap;
+				grid-gap: 1.12rem;
+				justify-content: center;
 				margin: 1.12rem 0;
 
-				@include media( tablet ) {
+				@include media( mobile ) {
+					display: grid;
+					grid-gap: 0.56rem;
 					grid-template-columns: repeat( 4, 1fr );
 				}
 			}