fix: fixed responsiveness on smaller and biggers screens

vycdev · Apr 9, 2020 · a1ac2e1 · a1ac2e1
1 parent 2a8e16d
commit a1ac2e1
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 19 deletions.
diff --git a/packages/web/public/index.html b/packages/web/public/index.html
@@ -6,7 +6,6 @@
             rel="shortcut icon"
             href="https://i.ibb.co/vzWDHft/favicon-ico.png"
         />
-        <meta name="viewport" content="width=device-width initial-scale=1.0" />
         <meta charset="utf-8" />
     </head>
 

diff --git a/packages/web/src/components/frontPage/components/pannel1/pannel1.tsx b/packages/web/src/components/frontPage/components/pannel1/pannel1.tsx
@@ -71,6 +71,9 @@ export const Pannel1 = () => {
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 1920 303"
+                    style={{ maxHeight: "320px" }}
+                    width="100%"
+                    preserveAspectRatio="none"
                 >
                     <path
                         d="M1921.5 313.056H-1v-153c50.808 20.339 585.5-12 998-114.5s924.5 0 924.5 0v267.5z"

diff --git a/packages/web/src/components/frontPage/components/pannel1/style.tsx b/packages/web/src/components/frontPage/components/pannel1/style.tsx
@@ -4,26 +4,28 @@ import styled from "@emotion/styled";
 export const StyledPannel1 = styled.div`
     position: relative;
     background-color: #198cf6;
-    height: 100vh;
-    min-height: 930px;
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
+    align-items: center;
+    min-height: 900px;
+    padding-top: 10px;
+    align-content: center;
     & > * {
-        flex: 1 1 450px;
+        flex: 1 0 450px;
     }
 `;
 //// CROWN SVG 1
 export const SvgCrown = styled.div`
-    width: 480px;
+    min-width: 480px;
 `;
 export const FixCrown = styled.div`
     position: relative;
-    flex: 1 1 500px;
+    flex: 1 0 500px;
+    min-height: 500px;
 `;
 
 export const VerticallyCenteredDiv = styled.div`
-    margin: 0;
     position: absolute;
     top: 35%;
     left: 50%;
@@ -33,18 +35,18 @@ export const VerticallyCenteredDiv = styled.div`
 //// TEXT ON THE RIGHT 1
 export const FixText = styled.div`
     position: relative;
-    flex: 2 2 750px;
-    margin-top: -100px;
+    flex: 2 0 750px;
+    min-height: 600px;
 `;
 
 export const TitleTextButton = styled.div`
     font-family: "Verdana";
     color: white;
     font-weight: bold;
     text-align: center;
+    height: auto;
 `;
 export const VerticallyCenteredText = styled.div`
-    margin: 0;
     position: absolute;
     top: 40%;
     left: 50%;
@@ -55,7 +57,7 @@ export const VerticallyCenteredText = styled.div`
 
 export const Title = styled.div`
     font-size: 110px;
-    width: auto;
+    text-align: center;
 `;
 
 export const RandomText = styled.div`

diff --git a/packages/web/src/components/frontPage/components/pannel2/style.tsx b/packages/web/src/components/frontPage/components/pannel2/style.tsx
@@ -2,14 +2,15 @@ import styled from "@emotion/styled";
 
 export const StyledPannel2 = styled.div`
     background: white;
-    height: 80vh;
+    height: 700px;
     display: flex;
     position: relative;
-
+    align-content: center;
+    align-items: center;
     flex-wrap: wrap;
     flex-direction: row;
     & > * {
-        flex: 1 1 450px;
+        flex: 1 0 450px;
     }
 `;
 export const VerticallyCenteredDiv = styled.div`
@@ -22,9 +23,8 @@ export const VerticallyCenteredDiv = styled.div`
 `;
 
 export const Text = styled.div`
-    margin: 0;
     position: absolute;
-    top: 40%;
+    top: 55%;
     left: 50%;
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
@@ -39,10 +39,11 @@ export const TextStyling = styled.div`
 `;
 export const FixText = styled.div`
     position: relative;
-    flex: 2 2 750px;
+    flex: 2 0 850px;
+    min-height: 500px;
 `;
 export const FixChart = styled.div`
     position: relative;
-    flex: 1 1 500px;
-    height: 500px;
+    flex: 1 0 600px;
+    min-height: 600px;
 `;