LSD-1501 Fix mobile Safari, grid tpl on mobile

famous-smoke · May 9, 2024 · 02f7dc9 · 02f7dc9
1 parent 4688991
commit 02f7dc9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/best-cigars-guide/blocks/columns/columns.css b/best-cigars-guide/blocks/columns/columns.css
@@ -19,7 +19,7 @@
   display: block;
 }
 
-@media (width >= 900px) {
+@media (min-width: 900px) {
   .columns > div {
     align-items: center;
     flex-direction: unset;

diff --git a/best-cigars-guide/blocks/header/header.css b/best-cigars-guide/blocks/header/header.css
@@ -28,13 +28,17 @@ header nav[aria-expanded="true"] {
   min-height: 100vh;
 }
 
-@media (width <= 600px) {
+@media (max-width: 600px) {
   header nav {
     grid-template:
-      'brand' calc(var(--nav-height) / 2)
+      'brand' auto
       'tools' auto
   }
 
+  header nav p {
+    font-size: 0.8em;
+  }
+
   header nav .brand-logo {
     flex-flow: column;
   }
@@ -44,7 +48,7 @@ header nav[aria-expanded="true"] {
   }
 }
 
-@media (width >= 900px) {
+@media (min-width: 900px) {
   header nav[aria-expanded="true"] {
     min-height: 0;
     overflow: visible;
@@ -135,7 +139,7 @@ header nav[aria-expanded="true"] .nav-hamburger-icon::after {
   transform: rotate(-45deg);
 }
 
-@media (width >= 900px) {
+@media (min-width: 900px) {
   header nav .nav-hamburger {
     display: none;
     visibility: hidden;
@@ -234,7 +238,7 @@ header nav .nav-sections ul > li > ul > li {
   font-weight: 500;
 }
 
-@media (width >= 900px) {
+@media (min-width: 900px) {
   header nav .nav-sections {
     display: block;
     visibility: visible;

diff --git a/best-cigars-guide/styles/styles.css b/best-cigars-guide/styles/styles.css
@@ -45,7 +45,7 @@
   --content-width: 1020px;
 }
 
-@media (width >= 900px) {
+@media (min-width: 900px) {
   :root {
     --heading-font-size-xxl: 60px;
     --heading-font-size-xl: 48px;
@@ -56,7 +56,7 @@
   }
 }
 
-@media (width <= 600px) {
+@media (max-width: 600px) {
   :root {
     --nav-height: 180px;
   }
@@ -203,13 +203,13 @@ main .section {
   padding: 64px 16px;
 }
 
-@media (width >= 600px) {
+@media (min-width: 600px) {
   main .section {
     padding: 64px 32px;
   }
 }
 
-@media (width >= 900px) {
+@media (min-width: 900px) {
   .section > div {
     max-width: var(--content-width);
     margin: auto;