Fix/my jetpack recommendation mobile styling (#40370)

* Fix My Jetpack recommendation card styles on mobile * changelog
Automattic · Nov 29, 2024 · 1c1afdd · 1c1afdd
1 parent 9d42462
commit 1c1afdd
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 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
@@ -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
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix My Jetpack recommendation card styling on mobile