Adjust body padding

therealsujitk · Dec 9, 2023 · bf15472 · bf15472
1 parent ef67acf
commit bf15472
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 50 deletions.
diff --git a/frontend/README.md b/frontend/README.md
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,7 +1,7 @@
 .App {
-  max-width: 600px;
+  max-width: 750px;
   margin: auto;
-  padding: 30px;
+  padding: 70px;
 }
 
 footer ul {
@@ -15,3 +15,15 @@ footer ul li {
 footer a {
   text-decoration: none;
 }
+
+@media screen and (max-width: 992px) {
+  .App {
+    padding: 50px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .App {
+    padding: 30px;
+  }
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -50,9 +50,9 @@ function App() {
       <CssBaseline />
       <div className='App'>
         <header>
-          <Box sx={{display: 'flex', alignItems: 'center', gap: 1.5}}>
+          <Box sx={{display: 'flex', alignItems: 'center', gap: 1.5, mb: 3}}>
             <svg width="45" height="40" viewBox="0 0 50 42.763" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m24.689 0 24.689 42.763H0L24.689 0Z" fill="#fff"/></svg>
-            <h1>Vercel Badge</h1>
+            <Typography level="h1">Vercel Badge</Typography>
           </Box>
         </header>