From 1c1afdd602f50b6847273870112349d66b01f127 Mon Sep 17 00:00:00 2001
From: Dylan Munson <65001528+CodeyGuyDylan@users.noreply.github.com>
Date: Fri, 29 Nov 2024 07:35:58 -0700
Subject: [PATCH] Fix/my jetpack recommendation mobile styling (#40370)

* Fix My Jetpack recommendation card styles on mobile

* changelog
---
 .../evaluation-recommendations/style.module.scss  | 15 ++++++++-------
 .../fix-my-jetpack-recommendation-mobile-styling  |  4 ++++
 2 files changed, 12 insertions(+), 7 deletions(-)
 create mode 100644 projects/packages/my-jetpack/changelog/fix-my-jetpack-recommendation-mobile-styling

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;
 		}
 	}
 }
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