Fix Mobile view

hlxsites · Mar 15, 2024 · c7ec074 · c7ec074
1 parent 5e1d528
commit c7ec074
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css
@@ -13,6 +13,7 @@
 
 .columns > div > .columns-img-col {
   order: 0;
+  padding-bottom: 2rem;
 }
 
 .columns > div > .columns-img-col img {

diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -136,6 +136,11 @@ header nav[aria-expanded="true"] .nav-hamburger-icon::after {
     display: none;
     visibility: hidden;
   }
+
+  header nav .nav-sections ul > li > ul {
+    margin-top: 0;
+    display:block;
+  }
 }
 
 /* brand */
@@ -180,6 +185,7 @@ header nav .nav-sections ul > li {
 
 header nav .nav-sections ul > li > ul {
   margin-top: 0;
+  display:none;
 }
 
 header nav .nav-sections ul > li > ul > li {

diff --git a/blocks/summit-login/summit-login.css b/blocks/summit-login/summit-login.css
@@ -1,5 +1,4 @@
 #nav {
-    margin-left: 5rem;
     margin-top: 1.2rem;
 }
 
@@ -41,4 +40,10 @@ p:contains("ULTIMATE CASH BACK") {
 /** Item name */
 .summit-pdp p:nth-child(2) {
     font-size: 2.1rem;
-}    
+}
+
+@media (width >= 900px) {
+    #nav {
+        margin-left: 5rem;
+    }
+}
diff --git a/styles/styles.css b/styles/styles.css
@@ -87,12 +87,12 @@ h4, h5, h6 {
   scroll-margin: calc(var(--nav-height) + 1em);
 }
 
-h1 { font-size: var(--heading-font-size-xxl) }
-h2 { font-size: var(--heading-font-size-xl) }
-h3 { font-size: var(--heading-font-size-l) }
-h4 { font-size: var(--heading-font-size-m) }
-h5 { font-size: var(--heading-font-size-s) }
-h6 { font-size: var(--heading-font-size-xs) }
+h1 { font-size: var(--heading-font-size-xl) }
+h2 { font-size: var(--heading-font-size-l) }
+h3 { font-size: var(--heading-font-size-m) }
+h4 { font-size: var(--heading-font-size-s) }
+h5 { font-size: var(--heading-font-size-xs) }
+h6 { font-size: var(--heading-font-size-xxs) }
 
 p, dl, ol, ul, pre, blockquote {
   margin-top: 1em;
@@ -201,6 +201,13 @@ main .section {
     max-width: 1200px;
     margin: auto;
   }
+
+  h1 { font-size: var(--heading-font-size-xxl) }
+  h2 { font-size: var(--heading-font-size-xl) }
+  h3 { font-size: var(--heading-font-size-l) }
+  h4 { font-size: var(--heading-font-size-m) }
+  h5 { font-size: var(--heading-font-size-s) }
+  h6 { font-size: var(--heading-font-size-xs) }
 }
 
 /* section metadata */