fix: WIP - update banner styles for I/O mobile

newrelic · Jan 7, 2022 · 9c3183b · 9c3183b
1 parent f748cbc
commit 9c3183b
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/src/components/IOBanner.js b/src/components/IOBanner.js
@@ -25,25 +25,38 @@ const BannerHeaderContent = () => (
     <h2
       css={css`
         color: var(--color-brand-300);
+
+        @media (max-width: ${MOBILE_BREAKPOINT}) {
+          font-weight: 400;
+        }
       `}
     >
       Instant Observability
     </h2>
     <h1
       css={css`
         color: var(--color-neutrals-050);
+
+        @media (max-width: ${MOBILE_BREAKPOINT}) {
+          font-weight: 400;
+        }
       `}
     >
       Dashboards, alerts, and integrations all in one place
     </h1>
     <body
       css={css`
-        color: var(--color-neutrals-050);
         background: none;
+        color: var(--color-brand-300);
+
+        @media (max-width: ${MOBILE_BREAKPOINT}) {
+          font-size: 12px;
+          font-weight: 300;
+        }
       `}
     >
-      Our quickstarts bundle everything you need to start monitoring like a pro
-      right out of the box.
+      Our quickstarts bundles get you monitoring like a pro right out of the
+      box.
     </body>
   </div>
 );