Addressed the responsiveness issues in the tablet and overall design aesthetics.

Author: Programming-Sai

src/app/admin/dashboard/dashboard.module.css

@@ -196,35 +196,51 @@
     height: 500px;
 }
 
-
-
-@media screen and (max-width:640px) {
+@media screen and (max-width:1424px) {
     .container{
-        width: 100%;
-        left: 0;
-        
+        width: calc(100% - 80px);
+        left: 80px;
     }
-    .topContainer{
+}
+
+@media screen and (max-width:1324px) {
+    .secondRow {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
         flex-direction: column;
+    } 
+    .card{
+        width: 100% !important;
     }
     .card6{
         padding: 10px !important;
     }
-
-    .card{
-        width: 100% !important;
+    .card2{
+        width: auto !important;
+    }
+    .card7{
+        height: fit-content !important;
     }
-    
     .card5{
         width: 400px !important;
     } 
+}
 
-    .secondRow {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+
+@media screen and (max-width:868px) {
+    .container{
+        width: 100%;
+        left: 0;
+        
+    }
+    
+}
+
+@media screen and (max-width:640px) {
+    .topContainer{
         flex-direction: column;
-    }   
+    }
 }
 
 @media screen and (max-width:480px) {

src/components/adminrecentpost/adminrecentpost.module.css

@@ -16,7 +16,7 @@
 }
 
 .sliderItems{
-    width: 380px;
+    width: 400px;
     height: 100%;
     position: relative;
     justify-content: flex-start;

src/components/charts/Charts.jsx

@@ -440,7 +440,7 @@ const SEOMetrics = () => {
 
   return (
     <div className={styles.containerTable}>
-      <h4> SEO Performance Metrics </h4>
+      <h3> SEO Performance Metrics </h3>
       <table className={styles.tableContainer}>
         <thead>
           <tr>

src/components/charts/charts.module.css

@@ -26,7 +26,6 @@
 }
 
 .tableContainer{
-    padding: 10px;
     min-width: 100%;
     margin-block: 5%;
 }
@@ -52,7 +51,7 @@
     transform: scale(1.05);
 }
 
-.containerTable h4{
+.containerTable h3{
     margin-block: 3%;
     padding: 20px;
 }

src/components/sidenavbar/sidenavbar.module.css

@@ -172,8 +172,32 @@
     opacity: 0.6;
 }
 
+@media screen and (max-width:1424px) {
+    .container{
+        width: 80px;
+    }
+    .container ul{
+        margin-top: 250%;
+    } 
+    .container .imgContainer{
+        width: 50px;
+        height: 50px;
+    }
+    .container ul li .a span{
+        display: none;
+    }
+    .container h1, .container p{
+        display: none;
+    }
+    .container .profileContainer{
+        justify-content: flex-start;
+        margin-left: -10px;
+    }    
+     
+}
 
-@media screen and (max-width:640px) {
+
+@media screen and (max-width:868px) {
     .container{
         position: absolute;
         width: 60%;
@@ -184,7 +208,7 @@
         background-color: green;
     } 
     .container.active ul{
-        margin-top: 100%;
+        margin-top: 50%;
     }  
     .imgContainer{
         width: 100px;
@@ -221,6 +245,12 @@
 
 }
 
+@media screen and (max-width:640px) {
+    .container.active ul{
+        margin-top: 100%;
+    }  
+}
+
 @media screen and (max-width:480px) {
     .container.active ul{
         margin-top: 110%;

src/components/topbar/topbar.module.css

@@ -30,7 +30,14 @@
     text-align: center;
 }
 
-@media screen and (max-width:640px) {
+@media screen and (max-width:1424px) {
+    .container{
+        width: calc(100% - 80px);
+        left: 80px;
+    }
+}
+
+@media screen and (max-width:868px) {
     .container{
         width: 100%;
         left: 0;