Fix responsive button and remove extra spacing on mobile screens

saadpasta · Oct 4, 2024 · 0c7f864 · 0c7f864
1 parent d3fdcee
commit 0c7f864
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,8 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "format": "prettier --write \"./**/*.{js,css,json,scss}\"",
-    "check-format": "prettier -c \"./**/*.{js,css,json,scss}\""
+    "check-format": "prettier -c \"./**/*.{js,css,json,scss}\"",
+    "dev": "react-scripts start"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -52,7 +53,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "dotenv": "^8.2.0",
+    "dotenv": "^8.6.0",
     "prettier": "^2.3.1"
   }
 }
diff --git a/src/components/button/Button.scss b/src/components/button/Button.scss
@@ -40,8 +40,17 @@
     margin-right: 0px;
   }
 }
+
 @media (max-width: 320px) {
   .main-button {
     font-size: 0.75rem;
   }
 }
+
+@media (max-width: 435px) {
+  .main-button {
+   font-size: 12px;
+   margin-right: 15px;
+
+  }
+}
diff --git a/src/index.css b/src/index.css
@@ -34,3 +34,13 @@ body {
     line-height: normal;
   }
 }
+
+
+/* hide the overflow  */
+@media (max-width: 400px) {
+  html,
+  body {
+   overflow-x: hidden;
+   overflow-y: auto;
+  }
+}