Make form and Help Page responsive

Author: PrinceSumberia

src/components/Form.js

@@ -26,7 +26,7 @@ class Form extends Component {
   render() {
     const { classes } = this.props;
     return (
-      <form onSubmit={this.handleSubmit}>
+      <form onSubmit={this.handleSubmit} className={classes.form}>
         <input
           className={classes.input}
           name="location"

src/styles/FormStyles.js

@@ -1,4 +1,15 @@
+import sizes from "./sizes";
+
 export default {
+  form: {
+    // [sizes.down("xs")]: {
+    //   display: "flex",
+    //   flexDirection: "column",
+    //   justifyContent: "center",
+    //   alignItems: "center",
+    // },
+  },
+
   input: {
     fontFamily: "inherit",
     fontSize: "1.6rem",
@@ -9,9 +20,21 @@ export default {
     margin: "1.5rem",
     transition: "all .4s",
 
+    [sizes.down("md")]: {
+      width: "35%",
+      fontSize: "1.4rem",
+      padding: "1rem 2rem",
+    },
+
+    [sizes.down("xs")]: {},
+
     "&:focus": {
       width: "22%",
       outline: "none",
+
+      [sizes.down("md")]: {
+        width: "45%",
+      },
     },
 
     "&::placeholder": {
@@ -32,6 +55,11 @@ export default {
       transition: "all .4s",
       transform: "translateY(-2px)",
       boxShadow: "0 .5rem 1rem rgba(0,0,0,0.2)",
+
+      [sizes.down("md")]: {
+        fontSize: "1.4rem",
+        padding: "1rem 1.5rem",
+      },
     },
 
     "&:hover": {

src/styles/HelpStyles.js

@@ -7,12 +7,19 @@ export default {
 
   mainHeading: {
     marginBottom: "2rem",
+
+    [sizes.down("md")]: {
+      margin: "2rem",
+    },
+    [sizes.down("sm")]: {
+      fontSize: "2rem",
+    },
   },
 
   container: {
     marginTop: "3rem",
     display: "flex",
-    justifyContent: "space-between",
+    justifyContent: "space-around",
     flexWrap: "wrap",
   },
 
@@ -21,14 +28,22 @@ export default {
     backgroundColor: "#fff",
     borderRadius: "1rem",
     padding: "3.5rem",
-    width: "25%",
+    width: "20%",
     display: "flex",
-    margin: "2rem 0",
+    margin: "2rem 1rem",
     flexDirection: "column",
     textAlign: "left",
 
-    [sizes.down("md")]: {
+    [sizes.down("sm")]: {
+      padding: "2rem",
+      margin: "1rem",
+      width: "30%",
+    },
+
+    [sizes.down("xs")]: {
       padding: "2rem",
+      margin: "1rem",
+      width: "50%",
     },
   },