add responsive standfor page to show fullly aligned contents on md and sm screens. (#47)

* add responsive standforpage, to show fully aligned content on medium and smaller screens

* minor css change

Author: Abhishek-kumar09

src/components/AboutCard/MainCard.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Typography, makeStyles, Container, Hidden } from '@material-ui/core';
+import { Typography, makeStyles, Container } from '@material-ui/core';
 import SubCard from './SubCard';
 
 const useStyles = makeStyles(theme => ({
@@ -25,11 +25,11 @@ function MainCard({ content, ...props }) {
       <Typography variant="subtitle1" className={classes.content}>
         {content.about}
       </Typography>
-      <Hidden smDown>
+      <>
         {content.points.map(point => (
           <SubCard key={point.id} point={point} />
         ))}
-      </Hidden>
+      </>
     </Container>
   );
 }

src/components/AboutCard/SubCard.js

@@ -1,16 +1,37 @@
 import React from 'react';
-import { Grid, Typography, makeStyles, Box } from '@material-ui/core';
+import { Grid, Typography, makeStyles, Box, Hidden } from '@material-ui/core';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     padding: 0,
-    paddingTop: '40px'
+    paddingTop: '40px',
+    textAlign: 'center'
   },
 
-  extraMargin: {
+  title: {
     marginLeft: 15,
+    float: 'right',
     [theme.breakpoints.down('md')]: {
       marginLeft: 25
+    },
+    [theme.breakpoints.down('xs')]: {
+      margin: '0 auto',
+      float: 'none',
+      textAlign: 'center',
+    }
+  },
+  contentTitle: {
+    fontWeight: 'bold',
+    [theme.breakpoints.down('xs')]: {
+      fontWeight: 'normal'
+    }
+  },
+  image: {
+    margin: '10px auto',
+    display: 'inline-block',
+    float: 'left',
+    [theme.breakpoints.down('xs')]: {
+      float: 'none',
     }
   }
 }));
@@ -19,18 +40,20 @@ const SubCard = ({ point }) => {
   const classes = useStyles();
   return (
     <Grid container className={classes.root}>
-      <Grid item md={2}>
+      <Grid className={classes.image} item sm={2} xs={12}>
         <img alt="title-img" style={{ marginTop: '6px' }} height="55px" src={point.img} />
       </Grid>
-      <Grid item md={10}>
-
+      <Grid item sm={10} xs={12}>
         <Typography
-          className={classes.extraMargin}
+          className={classes.title}
+          align="justify"
           variant="subtitle1"
         >
-          <Box component="span" style={{ fontWeight: 'bold' }} display="inline-block">{`${point.contentTitle} :`}</Box>
-          {` `}
-          {point.content}
+          <Box component="span" className={classes.contentTitle} display="inline-block">{`${ point.contentTitle }`}</Box>
+          
+          <Hidden xsDown>
+            <strong> : </strong>{ point.content }
+          </Hidden>
         </Typography>
       </Grid>
     </Grid>

src/views/pages/HomeView/MainCards.js

@@ -21,10 +21,10 @@ function MainCards({ className, ...rest }) {
   return (
     <Container className={clsx(classes.root, className)} {...rest}>
       <Grid alignItems="center" container justify="center" spacing={8}>
-        <Grid item md={6} sm={6} xs={12}>
+        <Grid item md={6} xs={12}>
           <MainCard content={openKnowledgeContent} />
         </Grid>
-        <Grid item md={6} sm={6} xs={12}>
+        <Grid item md={6} xs={12}>
           <MainCard content={openSourceContent} />
         </Grid>
       </Grid>