From 55da50121b2f9f8c2640198a41224b7e1cd4f792 Mon Sep 17 00:00:00 2001
From: Dylan Munson <65001528+CodeyGuyDylan@users.noreply.github.com>
Date: Wed, 27 Nov 2024 12:10:27 -0700
Subject: [PATCH 1/2] Fix My Jetpack recommendation card styles on mobile

---
 .../evaluation-recommendations/style.module.scss  | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/projects/packages/my-jetpack/_inc/components/evaluation-recommendations/style.module.scss b/projects/packages/my-jetpack/_inc/components/evaluation-recommendations/style.module.scss
index 0a6799268feac..ec1b6b0e2aab2 100644
--- a/projects/packages/my-jetpack/_inc/components/evaluation-recommendations/style.module.scss
+++ b/projects/packages/my-jetpack/_inc/components/evaluation-recommendations/style.module.scss
@@ -11,7 +11,7 @@
 }
 
 ul.recommendations-list {
-	grid-template-columns: repeat( 5, 1fr );
+	grid-template-columns: repeat( 5, 100% );
 	grid-auto-flow: column;
 	overflow-x: auto;
 	scroll-snap-type: x mandatory;
@@ -25,23 +25,24 @@ ul.recommendations-list {
 	}
 
 	li {
-		min-width: 320px;
+		width: 100%;
+		max-width: 100%;
 		scroll-snap-align: start;
 		grid-column: unset;
 		grid-column-end: unset;
 	}
 
-	@media screen and (max-width: 600px) {
-		grid-template-columns: repeat( 5, 100% );
+	@media screen and (min-width: 601px) {
+		grid-template-columns: repeat( 5, 1fr );
 
 		li {
-			min-width: unset;
+			width: 420px;
 		}
 	}
 
-	@media screen and (max-width: 1024px) {
+	@media screen and (min-width: 1025px) {
 		li {
-			min-width: 450px;
+			width: 320px;
 		}
 	}
 }

From 04973149c52128a4098e9d1ecd9de2b690a920a7 Mon Sep 17 00:00:00 2001
From: Dylan Munson <65001528+CodeyGuyDylan@users.noreply.github.com>
Date: Wed, 27 Nov 2024 12:11:17 -0700
Subject: [PATCH 2/2] changelog

---
 .../changelog/fix-my-jetpack-recommendation-mobile-styling    | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 projects/packages/my-jetpack/changelog/fix-my-jetpack-recommendation-mobile-styling

diff --git a/projects/packages/my-jetpack/changelog/fix-my-jetpack-recommendation-mobile-styling b/projects/packages/my-jetpack/changelog/fix-my-jetpack-recommendation-mobile-styling
new file mode 100644
index 0000000000000..6a923996aca2d
--- /dev/null
+++ b/projects/packages/my-jetpack/changelog/fix-my-jetpack-recommendation-mobile-styling
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix My Jetpack recommendation card styling on mobile