Merge pull request #59 from The-Phoenics/Breaking-UI-51

Making layout responsive
Satyam1923 · May 12, 2024 · ee2a800 · ee2a800
2 parents ca1eff8 + 64a0611
commit ee2a800
Showing 1 changed file with 18 additions and 2 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -435,14 +435,30 @@ background-color: #5773ff;
 }
 
 
-@media(max-width: 768px) {
+@media(max-width: 1072px) {
   .ui {
-    display: flex;
+    width: 100vw;
+    padding: 5vh 4vw;
     flex-direction: column;
   }
+
+  .player {
+    border-bottom-left-radius: 0px;
+    border-top-right-radius: 15px;
+  }
+
+  .imgBx img {
+    min-width: 300px;
+  }
+
+  .search-box {
+    border-bottom-left-radius: 15px;
+    border-top-right-radius: 0px;
+  }
 
   .player, .search-box {
     height: 600px;
     width: 40vh;
+    width: 100%;
   }
 }