Make Some changes for smaller screen

dhairyagothi · Jan 5, 2025 · 33b4799 · 33b4799
1 parent 16eddd1
commit 33b4799
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 2 deletions.
diff --git a/home.css b/home.css
@@ -137,4 +137,9 @@ body::-webkit-scrollbar-thumb {
   #projects{
     padding: 9px;
   }
-}
+
+ .links table tbody tr td{
+    margin-left: 100px;
+  }
+
+}
diff --git a/index.css b/index.css
@@ -22,4 +22,26 @@ html {
 
 #bgCanvas {
     filter: blur(5px);
+}
+
+@media(max-width:426px) {
+    .links table tbody tr td{
+        padding: 8px 4px;
+    }
+}
+
+@media(max-width:330px) {
+    .links table tbody tr td{
+        padding-left: 2px;
+        padding-right: 2px;
+      }
+
+      .links table tbody tr .project-name{
+        padding: 8px 7px;
+      }
+
+      .links table tbody tr td a{
+        margin-left: 4px;
+      }
+
 }
diff --git a/index.html b/index.html
@@ -96,11 +96,23 @@
         transform: translateY(0);
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
       }
+
+      #title-heading {
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+      }
+
+      @media (max-width: 426px) {
+        #title-heading {
+          margin-top: 5rem;
+          margin-bottom: 3rem;
+        }
+      }
     </style>
 
     <!-- Main Page Starts Here -->
     <div class="content" id="projects">
-      <div class="title is-2 has-text-centered my-6">
+      <div class="title is-2 has-text-centered" id="title-heading">
         100 Days 100 Web Projects
       </div>
       <p class="subtitle has-text-centered">