fix: mobile adjustment

becooq81 · Feb 5, 2024 · abff66a · abff66a
1 parent 2872884
commit abff66a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 20 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -665,6 +665,23 @@ progress {
     font-size: 150%;
   }
 
+  #pill-main {
+    animation-name: example;
+    animation-duration: 1.5s; /* Adjust as needed */
+    animation-iteration-count: 1; /* Plays only once */
+    animation-fill-mode: forwards; /* Keeps the last frame */
+    height: auto;
+    background-position: center;
+    background-size: cover;
+    width: 85vw;
+    height: 95vh;
+    background-repeat: no-repeat;
+  }
+
+  #pill-img {
+    display: none;
+  }
+
 }
 
 
@@ -673,6 +690,14 @@ progress {
   .tech-image-container img {
       max-width: 50%; 
   }
+  #pill-main {
+    background-image: none;
+  }
+  #pill-img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
   .keyboard-header {
     font-weight: bold;
   }
@@ -8598,24 +8623,11 @@ textarea.form-control-lg {
   --bs-text-opacity: 0.75;
 }
 
-#pill-main {
-  animation-name: example;
-  animation-duration: 1.5s; /* Adjust as needed */
-  animation-iteration-count: 1; /* Plays only once */
-  animation-fill-mode: forwards; /* Keeps the last frame */
-  height: auto;
-  background-position: center;
-  background-size: cover;
-  width: 85vw;
-  height: 95vh;
-  background-repeat: no-repeat;
-}
-
 @keyframes example {
-  0%, 24.99999%   {background-image: url("../assets/components/main-1.png");}
-  25%, 49.99999%  {background-image: url("../assets/components/main-2.png");}
-  50%, 74.99999%  {background-image: url("../assets/components/main-3.png");}
-  75%, 100% {background-image: url("../assets/components/main-4.png");}
+  0%  {background-image: url("../assets/components/main-1.png");}
+  25% {background-image: url("../assets/components/main-2.png");}
+  50% {background-image: url("../assets/components/main-3.png");}
+  100% {background-image: url("../assets/components/main-4.png");}
 }
 
 .text-opacity-100 {

diff --git a/index.html b/index.html
@@ -15,18 +15,16 @@
         <!-- Navigation-->
         <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
             <div class="container px-4">
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
-                <div class="collapse navbar-collapse" id="navbarResponsive">
                     <ul class="navbar-nav ms-auto" >
                         <li class="nav-item"><a target="_blank" href="https://github.com/becooq81/Pill" class="nav-link" id="nav-bar-text-custom">
                             <img class="email-icon"src="assets/icons/github.svg">
                         </a></li>
                     </ul>
-                </div>
             </div>
         </nav>
         <section class="bg-primary text-white">
             <div id="pill-main" style="background-position:center;">
+                <img src="assets/logo/main_page.png" alt="Find My Pill" style="width:100%" class="pill-img">
             </div>
         </section>
         <section id="pill-intro">