Merge pull request #6 from PrinceSumberia/responsiveSymptoms

Responsive symptoms

Author: PrinceSumberia

src/components/Symptoms.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import { withStyles } from "@material-ui/styles";
 import styles from "../styles/SymptomsStyles";
 import { Link } from "react-router-dom";
+import Footer from "./Footer";
 
 class Symptoms extends Component {
   render() {
@@ -92,6 +93,9 @@ class Symptoms extends Component {
             </div>
           </div>
         </div>
+        <div className={classes.footer}>
+          <Footer />
+        </div>
       </div>
     );
   }

src/styles/FooterStyles.js

@@ -25,13 +25,15 @@ export default {
     fontFamily: "inherit",
     border: "none",
     fontSize: "1.7rem",
-    borderRadius: "2rem",
+    borderRadius: "1.5rem",
     color: "white",
     transition: "all .3s",
-    transform: "translateY(-.5rem)",
+    transform: "translateY(-.3rem)",
+    boxShadow: "0 1rem 3rem rgba(0,0,0,.24)",
     textDecoration: "none",
 
     [sizes.down("md")]: {
+      boxShadow: "none",
       padding: "1rem 2.5rem",
       fontSize: "1.6rem",
     },

src/styles/SymptomsStyles.js

@@ -1,11 +1,22 @@
+import sizes from "./sizes";
+
 export default {
   symptoms: {
     padding: ".2rem 1rem",
+
+    [sizes.down("md")]: {
+      marginTop: "1.5rem",
+      padding: "1.5rem",
+    },
   },
 
   content: {
     padding: "1rem",
     display: "flex",
+
+    [sizes.down("lg")]: {
+      flexDirection: "column",
+    },
   },
 
   mainContent: {
@@ -19,12 +30,23 @@ export default {
   sidebar: {
     padding: ".5rem 1rem",
     flex: "0 0 30%",
+
+    [sizes.down("lg")]: {
+      padding: "1.5rem 1rem",
+    },
   },
 
   video: {
     height: "25rem",
     borderRadius: "1rem",
     marginBottom: "5rem",
+
+    [sizes.down("lg")]: {
+      width: "55%",
+      height: "auto",
+      margin: "1.75rem auto",
+    },
+
     "& iframe": {
       display: "block",
       overflow: "hidden",
@@ -34,9 +56,14 @@ export default {
 
   heading: {
     marginBottom: "2rem",
+
     "& span": {
       color: "#6236FF",
     },
+
+    [sizes.down("lg")]: {
+      textAlign: "center",
+    },
   },
 
   alert: {
@@ -89,4 +116,8 @@ export default {
   },
 
   info: {},
+
+  footer: {
+    width: "100%",
+  },
 };