chore: minor responsive style adjustments to main page title

newrelic · Jul 30, 2020 · 04c4a32 · 04c4a32
1 parent c76eca1
commit 04c4a32
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/src/components/PageLayout/Header.js b/src/components/PageLayout/Header.js
@@ -10,6 +10,7 @@ const Header = ({ title, children }) => (
       align-items: center;
       justify-content: space-between;
       border-bottom: 1px solid var(--divider-color);
+      padding-bottom: 1rem;
 
       @media screen and (max-width: 1080px) {
         flex-direction: column;
@@ -23,6 +24,14 @@ const Header = ({ title, children }) => (
         font-size: 2.5rem;
         font-weight: normal;
         margin-bottom: 0;
+        line-height: 1;
+
+        ${children &&
+        css`
+          @media screen and (max-width: 1080px) {
+            margin-bottom: 0.5rem;
+          }
+        `}
       `}
     >
       {title}