refactor: upgraded mobile styles

fairDataSociety · Nov 23, 2023 · 4bf486d · 4bf486d
1 parent 5ce3855
commit 4bf486d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/public/index.html b/public/index.html
@@ -80,6 +80,28 @@
             /* Add any additional styling such as font-family, color, etc. */
         }
     </style>
+
+    <style>
+        /* Default styles for mobile */
+        .headers {
+            margin-left: 0 !important;
+        }
+
+        /* Tablet (devices with min-width of 768px) */
+        @media (min-width: 768px) {
+            .headers {
+                margin-left: 1rem !important;
+            }
+        }
+
+        /* PC (devices with min-width of 1024px) */
+        @media (min-width: 1024px) {
+            .headers {
+                margin-left: 2rem !important;
+            }
+        }
+
+    </style>
 </head>
 <body>
 <div id="root"></div>

diff --git a/src/components/differentPoints/differentPoints.tsx b/src/components/differentPoints/differentPoints.tsx
@@ -24,7 +24,7 @@ function DifferentPoints(props: Props) {
           <div>
             <div className={classes.content}>
               {/*<h1 className={classes.header}>What makes Fairdrive different</h1>*/}
-              <Typography variant="h2" gutterBottom={true} style={{marginLeft: '2rem'}}>
+              <Typography variant="h2" gutterBottom={true} className="headers">
                 <b>
                   What makes Fairdrive different
                 </b>
@@ -64,12 +64,7 @@ function DifferentPoints(props: Props) {
                   <strong>Expanding dApp Store:</strong>{' '}
                   Explore and use a diverse range of dApps, all while maintaining sovereignty over your data.
                 </div>
-
-                {/*<div className={classes.header} style={{marginTop: '3rem'}}>*/}
-                {/*  Reserve Your Spot as an Early Adopter*/}
-                {/*</div>*/}
-
-                <Typography variant="h2" gutterBottom={true} style={{marginLeft: '2rem'}}>
+                <Typography variant="h2" gutterBottom={true} className="headers">
                   <b>
                     Reserve Your Spot as an Early Adopter
                   </b>
@@ -79,7 +74,7 @@ function DifferentPoints(props: Props) {
                 {/*  Join the waiting list*/}
                 {/*</div>*/}
 
-                <Typography variant="h3" gutterBottom={true} style={{marginLeft: '2rem'}}>
+                <Typography variant="h3" gutterBottom={true} className="headers">
                   <b>
                     Join the waiting list
                   </b>