mobile css optimizing social nav

src/styles/socialNav.css

@@ -12,6 +12,16 @@
   transform: translateX(50%);
 }
 
+@media (max-width: 576px) {
+  .socialNav {
+    transition: ease 0.4s;
+    right: 100%;
+    transform: translateX(100%);
+    width: 100%;
+    align-items: end;
+  }
+}
+
 .socialNavInside {
   width: 100%;
   padding: 10px;
@@ -27,6 +37,12 @@
   max-width: 80vw;
 }
 
+@media (max-width: 576px) {
+  .socialNavInside {
+    max-width: unset;
+  }
+}
+
 .socialNavInside::-webkit-scrollbar {
   display: none;
 }
@@ -62,6 +78,13 @@
   grid-gap: 5px;
 }
 
+@media (max-width: 576px) {
+  .socialNavInsideWrapper {
+    width: 100%;
+    justify-content: end;
+  }
+}
+
 .socialNavCollapse {
   display: flex;
   flex-direction: column;