Update main page grid styling

src/client/components/main_layout/Main.js

@@ -46,6 +46,7 @@ const styles = theme => ({
 
 const Main = props => {
   const { classes, perspectives } = props
+  const xsScreen = useMediaQuery(theme => theme.breakpoints.down('xs'))
   const xlScreen = useMediaQuery(theme => theme.breakpoints.up('xl'))
 
   const gridForLargeScreen = () => {
@@ -86,7 +87,7 @@ const Main = props => {
 
   const basicGrid = () =>
     <>
-      <Grid container spacing={1}>
+      <Grid container spacing={1} justify={xsScreen ? 'center' : 'flex-start'}>
         {props.perspectives.map(perspective =>
           <MainCard
             key={perspective.id}

src/client/components/main_layout/MainCard.js

@@ -12,22 +12,26 @@ const useStyles = makeStyles(theme => ({
     textDecoration: 'none'
   },
   perspectiveCard: props => ({
-    height: 100,
     padding: theme.spacing(1.5),
     color: '#fff',
     background: `linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45) ), url(${props.perspective.frontPageImage})`,
-    backgroundSize: 'contain',
     backgroundRepeat: 'no-repeat',
-    [theme.breakpoints.down('md')]: {
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    '&:hover': {
+      background: `linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ), url(${props.perspective.frontPageImage})`,
+      backgroundRepeat: 'no-repeat',
       backgroundSize: 'cover',
       backgroundPosition: 'center'
     },
-    [theme.breakpoints.up('xl')]: {
-      height: 180,
-      backgroundSize: 'cover'
+    [theme.breakpoints.down('md')]: {
+      height: 180
     },
-    '&:hover': {
-      background: `linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ), url(${props.perspective.frontPageImage})`
+    [theme.breakpoints.between('md', 'lg')]: {
+      height: 100
+    },
+    [theme.breakpoints.up('xl')]: {
+      height: 180
     }
   })
 }))
@@ -39,7 +43,7 @@ const MainCard = props => {
     <Grid
       className={classes.link}
       key={perspective.id}
-      item xs={12} sm={4} md lg xl={4}
+      item xs={12} sm={6} md lg xl={4}
       component={Link}
       to={`/${perspective.id}/faceted-search`}
     >
@@ -52,7 +56,6 @@ const MainCard = props => {
         </Typography>
       </Paper>
     </Grid>
-
   )
 }
 

src/client/containers/SemanticPortal.js

@@ -70,11 +70,11 @@ const styles = theme => ({
   },
   mainContainer: {
     height: 'auto',
-    width: '100%',
+    // width: '100%',
     [theme.breakpoints.up('md')]: {
       height: 'calc(100% - 80px)' // 100% - app bar - padding
     },
-    padding: theme.spacing(1),
+    // padding: theme.spacing(1),
     [theme.breakpoints.down('sm')]: {
       marginTop: 56 // app bar
     },