MWPW-140877 - Quiz Marquee style updates (adobecom#1701)

* fixed quiz-marquee styles - aside.notification to inline on mobile, cards alignment on center * no margin on nested aside body-m * width update * added same card width style to quiz-results
vgoodric · Feb 1, 2024 · ad4b78e · ad4b78e
1 parent f3b6ee2
commit ad4b78e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/libs/blocks/quiz-marquee/quiz-marquee.css b/libs/blocks/quiz-marquee/quiz-marquee.css
@@ -104,6 +104,7 @@
 
 .quiz-marquee .aside.notification.small .foreground.container .text {
   align-items: flex-start;
+  flex-flow: row nowrap;
 }
 
 .quiz-marquee .aside.notification.small .foreground.container .text .icon-area {
@@ -112,6 +113,10 @@
   margin-right: var(--spacing-xxs);
 }
 
+.quiz-marquee .aside.notification.small .foreground.container .text .body-m {
+  margin: 0;
+}
+
 .quiz-marquee .nested.icon-bullet {
   display: grid;
   gap: var(--spacing-xxs);
@@ -126,7 +131,11 @@
   display: grid;
   gap: var(--spacing-m);
   width: 100%;
-  grid-template-columns: repeat(auto-fit, minmax(275px, max-content));
+  grid-template-columns: repeat(auto-fit, 378px);
+}
+
+.quiz-marquee.center .commerce-card {
+  justify-content: center;
 }
 
 /* CLS */

diff --git a/libs/blocks/quiz-results/quiz-results.css b/libs/blocks/quiz-results/quiz-results.css
@@ -20,7 +20,7 @@
   justify-content: center;
   width: 100%;
   max-width: 100%;
-  grid-template-columns: repeat(auto-fit,300px);
+  grid-template-columns: repeat(auto-fit, 378px);
   gap: 32px;
   padding-bottom: 32px;
 }