improved responsiveness

tari-project · Dec 9, 2024 · ec98dd6 · ec98dd6
1 parent 0d3d14d
commit ec98dd6
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 8 deletions.
diff --git a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/MainTimer/styles.ts b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/MainTimer/styles.ts
@@ -7,6 +7,22 @@ export const SectionLabel = styled('div')`
     font-weight: 700;
     line-height: 129.623%;
     text-transform: uppercase;
+
+    @media (max-height: 1024px) {
+        font-size: 18px;
+    }
+
+    @media (max-height: 900px) {
+        font-size: 15px;
+    }
+
+    @media (max-width: 1350px) {
+        font-size: 18px;
+    }
+
+    @media (max-width: 1200px) {
+        font-size: 15px;
+    }
 `;
 
 export const TopBar = styled('div')`
@@ -68,10 +84,34 @@ export const Number = styled('div')`
     @media (max-height: 900px) {
         font-size: 100px;
     }
+
+    @media (max-width: 1350px) {
+        font-size: 120px;
+    }
+
+    @media (max-width: 1200px) {
+        font-size: 100px;
+    }
 `;
 
 export const Label = styled('div')`
     font-size: 38px;
     line-height: 100%;
     text-transform: uppercase;
+
+    @media (max-height: 1024px) {
+        font-size: 30px;
+    }
+
+    @media (max-height: 900px) {
+        font-size: 25px;
+    }
+
+    @media (max-width: 1350px) {
+        font-size: 30px;
+    }
+
+    @media (max-width: 1200px) {
+        font-size: 25px;
+    }
 `;
diff --git a/...ontainers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/SuperCharger/styles.ts b/...ontainers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/SuperCharger/styles.ts
@@ -30,6 +30,10 @@ export const SectionLabel = styled('div')`
     line-height: 129.623%;
     text-transform: uppercase;
     white-space: nowrap;
+
+    @media (max-width: 1300px) {
+        font-size: 18px;
+    }
 `;
 
 export const LineRight = styled('div')`
@@ -46,15 +50,29 @@ export const FormWrapper = styled('form')`
     background-image: url(${backgroundImage});
     background-size: cover;
 
-    padding: 0 30px 0 10px;
+    padding: 0 30px 0px 10px;
+
     display: flex;
-    gap: 20px;
     justify-content: space-between;
     align-items: center;
+    gap: 20px;
 
     svg {
         flex-shrink: 0;
     }
+
+    @media (max-width: 1300px) {
+        padding: 0 30px;
+
+        svg {
+            display: none;
+        }
+    }
+
+    @media (max-width: 1220px) {
+        padding: 20px;
+        flex-wrap: wrap;
+    }
 `;
 
 export const InputField = styled('input')`

diff --git a/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/styles.ts b/src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainSidebar/styles.ts
@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 
 export const Wrapper = styled('div')`
-    max-width: 532px;
     width: 100%;
     height: 100%;
 
@@ -12,10 +11,6 @@ export const Wrapper = styled('div')`
     position: relative;
 
     overflow-y: auto;
-
-    @media (max-width: 1500px) {
-        max-width: 480px;
-    }
 `;
 
 export const BGImage1 = styled('img')`

diff --git a/src/containers/main/ShellOfSecrets/SoSMainModal/styles.ts b/src/containers/main/ShellOfSecrets/SoSMainModal/styles.ts
@@ -95,7 +95,8 @@ export const ContentLayer = styled('div')`
     position: relative;
     z-index: 3;
 
-    display: flex;
+    display: grid;
+    grid-template-columns: minmax(350px, 532px) minmax(643px, 1fr);
     gap: 40px;
 
     width: 100%;