Made Pages Responsive

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/index.css

@@ -30,7 +30,7 @@ body {
 
 @media (max-width: 576px) {
   body {
-    font-size: 1rem
+    font-size: 1.2rem
   }
 }
 

src/styles/CardsStyles.js

@@ -1,3 +1,5 @@
+import sizes from "./sizes";
+
 export default {
   card: {
     width: "100%",
@@ -24,6 +26,10 @@ export default {
 
   cardTitle: {
     textTransform: "capitalize",
+
+    [sizes.down("sm")]: {
+      fontSize: "1.6rem",
+    },
   },
   cardImage: {
     display: "block",

src/styles/DisplayTable.css

@@ -127,7 +127,7 @@ table {
   .delta-confirmed,
   .delta-recovered,
   .delta-deceased {
-    font-size: 1.2rem;
+    font-size: .9rem;
     margin-left: .5rem;
   }
 

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%",
     },
   },
 

src/styles/NavbarStyles.js

@@ -71,7 +71,6 @@ export default {
     },
 
     [sizes.down("xs")]: {
-      fontSize: "1.2rem",
       marginBottom: ".5rem",
     },
   },

src/styles/StaySafeStyles.js

@@ -1,16 +1,30 @@
+import sizes from "./sizes";
+
 export default {
   staySafe: {
     textAlign: "center",
 
     "& h1": {
       marginBottom: "4.5rem",
+
+      [sizes.down("lg")]: {
+        margin: "4rem 0",
+      },
+
+      [sizes.down("md")]: {
+        margin: "2.5rem 0",
+      },
     },
   },
   cardsBox: {
     display: "flex",
-    width: "100%",
     flexWrap: "wrap",
+    padding: "2rem",
     justifyContent: "space-around",
     alignItems: "stretch",
+
+    [sizes.down("sm")]: {
+      padding: "0",
+    },
   },
 };