Fixed responsive issues

moesaid · Aug 2, 2024 · 1a3423c · 1a3423c
1 parent c67d715
commit 1a3423c
Show file tree

Hide file tree

Showing 8 changed files with 219 additions and 214 deletions.
diff --git a/alert.html b/alert.html
@@ -13,7 +13,7 @@
 
 <!-- start navbar -->
 <div class="md:fixed md:w-full md:top-0 md:z-20 flex flex-row flex-wrap items-center bg-white p-6 border-b border-gray-300">
-    
+
     <!-- logo -->
     <div class="flex-none w-56 flex flex-row items-center">
       <img src="img/logo.png" class="w-10 flex-none">
@@ -23,8 +23,8 @@
         <i class="fad fa-list-ul"></i>
       </button>
     </div>
-    <!-- end logo -->   
-    
+    <!-- end logo -->
+
     <!-- navbar content toggle -->
     <button id="navbarToggle" class="hidden md:block md:fixed right-0 mr-6">
       <i class="fad fa-chevron-double-down"></i>
@@ -35,28 +35,28 @@
     <div id="navbar" class="animated md:hidden md:fixed md:top-0 md:w-full md:left-0 md:mt-16 md:border-t md:border-b md:border-gray-200 md:p-10 md:bg-white flex-1 pl-3 flex flex-row flex-wrap justify-between items-center md:flex-col md:items-center">
       <!-- left -->
       <div class="text-gray-600 md:w-full md:flex md:flex-row md:justify-evenly md:pb-10 md:mb-10 md:border-b md:border-gray-200">
-        <a class="mr-2 transition duration-500 ease-in-out hover:text-gray-900" href="#" title="email"><i class="fad fa-envelope-open-text"></i></a>        
-        <a class="mr-2 transition duration-500 ease-in-out hover:text-gray-900" href="#" title="email"><i class="fad fa-comments-alt"></i></a>        
-        <a class="mr-2 transition duration-500 ease-in-out hover:text-gray-900" href="#" title="email"><i class="fad fa-check-circle"></i></a>        
-        <a class="mr-2 transition duration-500 ease-in-out hover:text-gray-900" href="#" title="email"><i class="fad fa-calendar-exclamation"></i></a>        
+        <a class="mr-2 transition duration-500 ease-in-out hover:text-gray-900" href="#" title="email"><i class="fad fa-envelope-open-text"></i></a>
+        <a class="mr-2 transition duration-500 ease-in-out hover:text-gray-900" href="#" title="email"><i class="fad fa-comments-alt"></i></a>
+        <a class="mr-2 transition duration-500 ease-in-out hover:text-gray-900" href="#" title="email"><i class="fad fa-check-circle"></i></a>
+        <a class="mr-2 transition duration-500 ease-in-out hover:text-gray-900" href="#" title="email"><i class="fad fa-calendar-exclamation"></i></a>
       </div>
-      <!-- end left -->      
+      <!-- end left -->
 
       <!-- right -->
-      <div class="flex flex-row-reverse items-center"> 
+      <div class="flex flex-row-reverse items-center">
 
         <!-- user -->
         <div class="dropdown relative md:static">
 
           <button class="menu-btn focus:outline-none focus:shadow-outline flex flex-wrap items-center">
             <div class="w-8 h-8 overflow-hidden rounded-full">
               <img class="w-full h-full object-cover" src="img/user.svg" >
-            </div> 
+            </div>
 
             <div class="ml-2 capitalize flex ">
               <h1 class="text-sm text-gray-800 font-semibold m-0 p-0 leading-none">moeSaid</h1>
               <i class="fad fa-chevron-down ml-2 text-xs leading-none"></i>
-            </div>                        
+            </div>
           </button>
 
           <button class="hidden fixed top-0 left-0 z-10 w-full h-full menu-overflow"></button>
@@ -65,39 +65,39 @@ <h1 class="text-sm text-gray-800 font-semibold m-0 p-0 leading-none">moeSaid</h1
 
             <!-- item -->
             <a class="px-4 py-2 block capitalize font-medium text-sm tracking-wide bg-white hover:bg-gray-200 hover:text-gray-900 transition-all duration-300 ease-in-out" href="#">
-              <i class="fad fa-user-edit text-xs mr-1"></i> 
+              <i class="fad fa-user-edit text-xs mr-1"></i>
               edit my profile
-            </a>     
+            </a>
             <!-- end item -->
 
             <!-- item -->
             <a class="px-4 py-2 block capitalize font-medium text-sm tracking-wide bg-white hover:bg-gray-200 hover:text-gray-900 transition-all duration-300 ease-in-out" href="#">
-              <i class="fad fa-inbox-in text-xs mr-1"></i> 
+              <i class="fad fa-inbox-in text-xs mr-1"></i>
               my inbox
-            </a>     
+            </a>
             <!-- end item -->
 
             <!-- item -->
             <a class="px-4 py-2 block capitalize font-medium text-sm tracking-wide bg-white hover:bg-gray-200 hover:text-gray-900 transition-all duration-300 ease-in-out" href="#">
-              <i class="fad fa-badge-check text-xs mr-1"></i> 
+              <i class="fad fa-badge-check text-xs mr-1"></i>
               tasks
-            </a>     
+            </a>
             <!-- end item -->
 
             <!-- item -->
             <a class="px-4 py-2 block capitalize font-medium text-sm tracking-wide bg-white hover:bg-gray-200 hover:text-gray-900 transition-all duration-300 ease-in-out" href="#">
-              <i class="fad fa-comment-alt-dots text-xs mr-1"></i> 
+              <i class="fad fa-comment-alt-dots text-xs mr-1"></i>
               chats
-            </a>     
+            </a>
             <!-- end item -->
 
             <hr>
 
             <!-- item -->
             <a class="px-4 py-2 block capitalize font-medium text-sm tracking-wide bg-white hover:bg-gray-200 hover:text-gray-900 transition-all duration-300 ease-in-out" href="#">
-              <i class="fad fa-user-times text-xs mr-1"></i> 
+              <i class="fad fa-user-times text-xs mr-1"></i>
               log out
-            </a>     
+            </a>
             <!-- end item -->
 
           </div>
@@ -108,7 +108,7 @@ <h1 class="text-sm text-gray-800 font-semibold m-0 p-0 leading-none">moeSaid</h1
         <div class="dropdown relative mr-5 md:static">
 
           <button class="text-gray-500 menu-btn p-0 m-0 hover:text-gray-900 focus:text-gray-900 focus:outline-none transition-all ease-in-out duration-300">
-            <i class="fad fa-bells"></i>               
+            <i class="fad fa-bells"></i>
           </button>
 
           <button class="hidden fixed top-0 left-0 z-10 w-full h-full menu-overflow"></button>
@@ -219,7 +219,7 @@ <h1 class="text-sm font-semibold">time is up..</h1>
                 view all
               </a>
             </div>
-            <!-- end bottom -->            
+            <!-- end bottom -->
           </div>
         </div>
         <!-- end notifcation -->
@@ -228,7 +228,7 @@ <h1 class="text-sm font-semibold">time is up..</h1>
         <div class="dropdown relative mr-5 md:static">
 
           <button class="text-gray-500 menu-btn p-0 m-0 hover:text-gray-900 focus:text-gray-900 focus:outline-none transition-all ease-in-out duration-300">
-            <i class="fad fa-comments"></i>               
+            <i class="fad fa-comments"></i>
           </button>
 
           <button class="hidden fixed top-0 left-0 z-10 w-full h-full menu-overflow"></button>
@@ -265,7 +265,7 @@ <h1 class="text-sm font-semibold">mohamed said</h1>
 
             </a>
             <hr>
-            <!-- end item --> 
+            <!-- end item -->
 
             <!-- item -->
             <a class="flex flex-row items-center justify-start px-4 py-4 block capitalize font-medium text-sm tracking-wide bg-white hover:bg-gray-200 transition-all duration-300 ease-in-out" href="#">
@@ -318,10 +318,10 @@ <h1 class="text-sm font-semibold">mick</h1>
                 view all
               </a>
             </div>
-            <!-- end bottom -->            
+            <!-- end bottom -->
           </div>
         </div>
-        <!-- end messages -->               
+        <!-- end messages -->
 
 
       </div>

diff --git a/blank.html b/blank.html
@@ -13,7 +13,7 @@
 
 <!-- start navbar -->
 <div class="md:fixed md:w-full md:top-0 md:z-20 flex flex-row flex-wrap items-center bg-white p-6 border-b border-gray-300">
-    
+
     <!-- logo -->
     <div class="flex-none w-56 flex flex-row items-center">
       <img src="img/logo.png" class="w-10 flex-none">
@@ -23,8 +23,8 @@
         <i class="fad fa-list-ul"></i>
       </button>
     </div>
-    <!-- end logo -->   
-    
+    <!-- end logo -->
+
     <!-- navbar content toggle -->
     <button id="navbarToggle" class="hidden md:block md:fixed right-0 mr-6">
       <i class="fad fa-chevron-double-down"></i>
@@ -35,28 +35,28 @@
     <div id="navbar" class="animated md:hidden md:fixed md:top-0 md:w-full md:left-0 md:mt-16 md:border-t md:border-b md:border-gray-200 md:p-10 md:bg-white flex-1 pl-3 flex flex-row flex-wrap justify-between items-center md:flex-col md:items-center">
       <!-- left -->
       <div class="text-gray-600 md:w-full md:flex md:flex-row md:justify-evenly md:pb-10 md:mb-10 md:border-b md:border-gray-200">
-        <a class="mr-2 transition duration-500 ease-in-out hover:text-gray-900" href="#" title="email"><i class="fad fa-envelope-open-text"></i></a>        
-        <a class="mr-2 transition duration-500 ease-in-out hover:text-gray-900" href="#" title="email"><i class="fad fa-comments-alt"></i></a>        
-        <a class="mr-2 transition duration-500 ease-in-out hover:text-gray-900" href="#" title="email"><i class="fad fa-check-circle"></i></a>        
-        <a class="mr-2 transition duration-500 ease-in-out hover:text-gray-900" href="#" title="email"><i class="fad fa-calendar-exclamation"></i></a>        
+        <a class="mr-2 transition duration-500 ease-in-out hover:text-gray-900" href="#" title="email"><i class="fad fa-envelope-open-text"></i></a>
+        <a class="mr-2 transition duration-500 ease-in-out hover:text-gray-900" href="#" title="email"><i class="fad fa-comments-alt"></i></a>
+        <a class="mr-2 transition duration-500 ease-in-out hover:text-gray-900" href="#" title="email"><i class="fad fa-check-circle"></i></a>
+        <a class="mr-2 transition duration-500 ease-in-out hover:text-gray-900" href="#" title="email"><i class="fad fa-calendar-exclamation"></i></a>
       </div>
-      <!-- end left -->      
+      <!-- end left -->
 
       <!-- right -->
-      <div class="flex flex-row-reverse items-center"> 
+      <div class="flex flex-row-reverse items-center">
 
         <!-- user -->
         <div class="dropdown relative md:static">
 
           <button class="menu-btn focus:outline-none focus:shadow-outline flex flex-wrap items-center">
             <div class="w-8 h-8 overflow-hidden rounded-full">
               <img class="w-full h-full object-cover" src="img/user.svg" >
-            </div> 
+            </div>
 
             <div class="ml-2 capitalize flex ">
               <h1 class="text-sm text-gray-800 font-semibold m-0 p-0 leading-none">moeSaid</h1>
               <i class="fad fa-chevron-down ml-2 text-xs leading-none"></i>
-            </div>                        
+            </div>
           </button>
 
           <button class="hidden fixed top-0 left-0 z-10 w-full h-full menu-overflow"></button>
@@ -65,39 +65,39 @@ <h1 class="text-sm text-gray-800 font-semibold m-0 p-0 leading-none">moeSaid</h1
 
             <!-- item -->
             <a class="px-4 py-2 block capitalize font-medium text-sm tracking-wide bg-white hover:bg-gray-200 hover:text-gray-900 transition-all duration-300 ease-in-out" href="#">
-              <i class="fad fa-user-edit text-xs mr-1"></i> 
+              <i class="fad fa-user-edit text-xs mr-1"></i>
               edit my profile
-            </a>     
+            </a>
             <!-- end item -->
 
             <!-- item -->
             <a class="px-4 py-2 block capitalize font-medium text-sm tracking-wide bg-white hover:bg-gray-200 hover:text-gray-900 transition-all duration-300 ease-in-out" href="#">
-              <i class="fad fa-inbox-in text-xs mr-1"></i> 
+              <i class="fad fa-inbox-in text-xs mr-1"></i>
               my inbox
-            </a>     
+            </a>
             <!-- end item -->
 
             <!-- item -->
             <a class="px-4 py-2 block capitalize font-medium text-sm tracking-wide bg-white hover:bg-gray-200 hover:text-gray-900 transition-all duration-300 ease-in-out" href="#">
-              <i class="fad fa-badge-check text-xs mr-1"></i> 
+              <i class="fad fa-badge-check text-xs mr-1"></i>
               tasks
-            </a>     
+            </a>
             <!-- end item -->
 
             <!-- item -->
             <a class="px-4 py-2 block capitalize font-medium text-sm tracking-wide bg-white hover:bg-gray-200 hover:text-gray-900 transition-all duration-300 ease-in-out" href="#">
-              <i class="fad fa-comment-alt-dots text-xs mr-1"></i> 
+              <i class="fad fa-comment-alt-dots text-xs mr-1"></i>
               chats
-            </a>     
+            </a>
             <!-- end item -->
 
             <hr>
 
             <!-- item -->
             <a class="px-4 py-2 block capitalize font-medium text-sm tracking-wide bg-white hover:bg-gray-200 hover:text-gray-900 transition-all duration-300 ease-in-out" href="#">
-              <i class="fad fa-user-times text-xs mr-1"></i> 
+              <i class="fad fa-user-times text-xs mr-1"></i>
               log out
-            </a>     
+            </a>
             <!-- end item -->
 
           </div>
@@ -108,7 +108,7 @@ <h1 class="text-sm text-gray-800 font-semibold m-0 p-0 leading-none">moeSaid</h1
         <div class="dropdown relative mr-5 md:static">
 
           <button class="text-gray-500 menu-btn p-0 m-0 hover:text-gray-900 focus:text-gray-900 focus:outline-none transition-all ease-in-out duration-300">
-            <i class="fad fa-bells"></i>               
+            <i class="fad fa-bells"></i>
           </button>
 
           <button class="hidden fixed top-0 left-0 z-10 w-full h-full menu-overflow"></button>
@@ -219,7 +219,7 @@ <h1 class="text-sm font-semibold">time is up..</h1>
                 view all
               </a>
             </div>
-            <!-- end bottom -->            
+            <!-- end bottom -->
           </div>
         </div>
         <!-- end notifcation -->
@@ -228,7 +228,7 @@ <h1 class="text-sm font-semibold">time is up..</h1>
         <div class="dropdown relative mr-5 md:static">
 
           <button class="text-gray-500 menu-btn p-0 m-0 hover:text-gray-900 focus:text-gray-900 focus:outline-none transition-all ease-in-out duration-300">
-            <i class="fad fa-comments"></i>               
+            <i class="fad fa-comments"></i>
           </button>
 
           <button class="hidden fixed top-0 left-0 z-10 w-full h-full menu-overflow"></button>
@@ -265,7 +265,7 @@ <h1 class="text-sm font-semibold">mohamed said</h1>
 
             </a>
             <hr>
-            <!-- end item --> 
+            <!-- end item -->
 
             <!-- item -->
             <a class="flex flex-row items-center justify-start px-4 py-4 block capitalize font-medium text-sm tracking-wide bg-white hover:bg-gray-200 transition-all duration-300 ease-in-out" href="#">
@@ -318,10 +318,10 @@ <h1 class="text-sm font-semibold">mick</h1>
                 view all
               </a>
             </div>
-            <!-- end bottom -->            
+            <!-- end bottom -->
           </div>
         </div>
-        <!-- end messages -->               
+        <!-- end messages -->
 
 
       </div>