fix : mobil view optimal

enzo-mir · Dec 9, 2023 · 4d60f3e · 4d60f3e
1 parent e4dec61
commit 4d60f3e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -58,9 +58,9 @@ <h2>Features</h2>
           them on the go.
         </p>
         <ul>
-          <li class="active"><p>Simple Bookmarking</p></li>
-          <li><p>Speedy Searching</p></li>
-          <li><p>Easy Sharing</p></li>
+          <li class="active" tabindex="0"><p>Simple Bookmarking</p></li>
+          <li tabindex="0"><p>Speedy Searching</p></li>
+          <li tabindex="0"><p>Easy Sharing</p></li>
         </ul>
         <div id="carouselContainer">
           <div class="carousel">
@@ -131,8 +131,8 @@ <h2>Frequently Asked Questions</h2>
         <p>Here are some of our FAQs. If you have any other questions you’d like answered please feel free to email us.</p>
         <div id="accordion">
           <article data-open="false">
-            <h4>What is Bookmark?</h4>
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12">
+            <h4 tabindex="0">What is Bookmark?</h4>
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" tabindex="0">
               <path fill="none" stroke="#5267DF" stroke-width="3" d="M1 1l8 8 8-8" />
             </svg>
             <div>
@@ -143,8 +143,8 @@ <h4>What is Bookmark?</h4>
             </div>
           </article>
           <article data-open="false">
-            <h4>How can I request a new browser?</h4>
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12">
+            <h4 tabindex="0">How can I request a new browser?</h4>
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" tabindex="0">
               <path fill="none" stroke="#5267DF" stroke-width="3" d="M1 1l8 8 8-8" />
             </svg>
             <div>
@@ -156,8 +156,8 @@ <h4>How can I request a new browser?</h4>
             </div>
           </article>
           <article data-open="false">
-            <h4>Is there a mobile app?</h4>
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12">
+            <h4 tabindex="0">Is there a mobile app?</h4>
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" tabindex="0">
               <path fill="none" stroke="#5267DF" stroke-width="3" d="M1 1l8 8 8-8" />
             </svg>
             <div>
@@ -168,8 +168,8 @@ <h4>Is there a mobile app?</h4>
             </div>
           </article>
           <article data-open="false">
-            <h4>What about other Chromium browsers?</h4>
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12">
+            <h4 tabindex="0">What about other Chromium browsers?</h4>
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" tabindex="0">
               <path fill="none" stroke="#5267DF" stroke-width="3" d="M1 1l8 8 8-8" />
             </svg>
             <div>
@@ -180,7 +180,7 @@ <h4>What about other Chromium browsers?</h4>
             </div>
           </article>
         </div>
-        <button class="cta">More Info</button>
+        <button class="cta" tabindex="0">More Info</button>
       </section>
 
       <section id="joinSection">

diff --git a/style.css b/style.css
@@ -65,7 +65,10 @@ header {
     width: 18px;
     height: 15px;
     background-image: url(./images/icon-hamburger.svg);
+    background-repeat: no-repeat;
+    background-position: center;
     z-index: 500;
+    padding: 1em;
     &:hover {
       cursor: pointer;
     }
@@ -94,7 +97,7 @@ header {
       top: 0;
       content: "";
       width: 100%;
-      height: 0svh;
+      height: 0vh;
       background-color: hsla(229, 53%, 22%, 0.9);
       z-index: 30;
       transition: all 0.25s ease-out;
@@ -121,7 +124,7 @@ header {
       }
 
       &::after {
-        height: 100svh;
+        height: 100vh;
       }
 
       & > nav {
@@ -273,7 +276,7 @@ section#heroSection {
     }
   }
 
-  div.shapeBg {
+  & div.shapeBg {
     position: absolute;
     bottom: 0;
     right: 0;
@@ -282,8 +285,9 @@ section#heroSection {
     border-top-left-radius: 150px;
     border-bottom-left-radius: 150px;
   }
-
-  @media screen and (max-width: 1200px) {
+}
+@media screen and (max-width: 1200px) {
+  section#heroSection {
     display: flex;
     flex-direction: column-reverse;
     place-items: center;
@@ -412,12 +416,6 @@ section#featureSection {
       max-height: 300px;
     }
   }
-  @media screen and (max-width: 800px) {
-    & > div.shapeBg[role="img"] {
-      bottom: 25%;
-      max-height: 200px;
-    }
-  }
 
   &:has(ul > li:first-child.active) > div#carouselContainer {
     transform: translateX(0%);
@@ -448,6 +446,15 @@ section#featureSection {
   }
 }
 
+@media screen and (max-width: 800px) {
+  section#featureSection {
+    & > div.shapeBg[role="img"] {
+      bottom: 25%;
+      max-height: 200px;
+    }
+  }
+}
+
 section#extensionSection {
   height: 100%;
   display: grid;
@@ -555,6 +562,7 @@ section#extensionSection {
 
 section#accordionSection {
   height: 100%;
+  min-height: 100svh;
   display: grid;
   place-items: center;
   gap: 2em;