adaptive design added

djeck1432 · Oct 2, 2024 · de3f4a4 · de3f4a4
1 parent a3b0d1f
commit de3f4a4
Show file tree

Hide file tree

Showing 2 changed files with 133 additions and 2 deletions.
diff --git a/frontend/src/pages/spotnet/about/about.css b/frontend/src/pages/spotnet/about/about.css
@@ -18,7 +18,7 @@
     align-items: center;
     flex-direction: column;
     justify-content: space-between;
-    height: 102vh;
+    height: 105vh;
     width: 117%;
     right: 9.2%;
     background-color: var(--primary-color);
@@ -99,4 +99,135 @@
     background: var(--gradient, linear-gradient(73deg, #74D6FD 1.13%, #E01DEE 103.45%));
     /* Blur */
     filter: blur(80px);
+}
+
+@media (min-width: 1800px) {
+    .about-container {
+        width: 125%;
+        right: 150px;
+    }
+
+    .about-title{
+        font-size: 70px;
+    }
+
+    .card-about {
+        width: 400px;
+        height: 450px;
+    }
+    .card-gradient:nth-child(1){
+        position: absolute;
+        top: 250px;
+        left: -40px;
+        width: 232px;
+        height: 208px;
+    }
+
+    .card-gradient:nth-child(2){
+        position: absolute;
+        right: -70px;
+        bottom: 260px;
+        width: 232px;
+        height: 208px;
+    }
+
+}
+
+@media (max-width: 1800px) {
+    .about-container {
+        width: 120%;
+        right: 100px;
+    }
+
+    .card-about {
+        width: 370px;
+        height: 420px;
+    }
+
+    .card-gradient:nth-child(1){
+        position: absolute;
+        top: 300px;
+        left: -40px;
+    }
+
+    .card-gradient:nth-child(2){
+        position: absolute;
+        right: -70px;
+        bottom: 300px;
+    }
+}
+
+@media (max-width: 1710px) {
+    .about-container {
+        width: 100%;
+        right: 20px;
+    }
+
+    .card-about {
+        width: 340px;
+        height: 400px;
+    }
+
+    .card-gradient:nth-child(1){
+        position: absolute;
+        top: 100px;
+        left: -40px;
+    }
+
+    .card-gradient:nth-child(2){
+        position: absolute;
+        right: -70px;
+        bottom: 120px;
+    }
+}
+
+@media (max-width: 1440px) {
+    .about-container {
+        left: 10px;
+        width: 97%;
+    }
+
+    .card-about {
+        width: 320px;
+        height: 380px;
+    }
+}
+
+@media (max-width: 1550px) {
+    .about-container {
+        width: 100%;
+    }
+
+    .card-about {
+        width: 320px;
+        height: 380px;
+    }
+}
+
+@media (max-width: 1400px) {
+    .about-container {
+        left: -10px;
+        width: 105%;
+    }
+}
+
+@media (max-width: 1280px) {
+    .about-container {
+        width: 95%;
+        left: 15px;
+    }
+
+    .card-about {
+        width: 280px;
+        height: 360px;
+    }
+}
+
+
+@media (max-width: 1024px) {
+    .card-about {
+        width: 100%;
+        max-width: 280px;
+        margin-bottom: 20px;
+    }
 }
diff --git a/frontend/src/pages/spotnet/home/home.css b/frontend/src/pages/spotnet/home/home.css
@@ -20,7 +20,7 @@ body{
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    height: calc(100vh - 160px);
+    height: calc(111vh - 160px);
 }
 
 .center-text{