How can I stop my material UI Cards from going off screen creating a horizontal scroll situation?-CodePudding

I have created 5 components that are wrapped inside a component. I want all 5 of those cards to stay in one row whether the screen size increases or decreases. With my current code, the cards show up in one row, but they go over the screen. I would have to scroll to the right in order to see the fifth card.

I want to be able to see all five cards on the screen regardless of the screen size. At the very least, all of them together on a screen larger than an iPad. Please help.

Code Below:

"time-card" component


import * as React from 'react';
import {
  Card,
  CardHeader,
  CardMedia,
  CardContent,
  Typography,
} from '@mui/material';
import Icon from './images/icon.png';
import { makeStyles } from '@mui/styles';
import { variables } from 'theme';

const useStyles = makeStyles({
  card: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    textAlign: 'center',
    minWidth: 400,
    maxWidth: 500,
    height: '100%',
    position: 'relative',
    backgroundColor: '#7b1f82',
    backgroundImage: 'linear-gradient(#891f7e, #6d2386)',
    minHeight: '600px',
    maxHeight: '700px',
    margin: 10,
    padding: '30px',
    flexGrow: 1,
    flexShrink: 1,
  },
  mediaSize: {
    width: 70,
    display: 'flex',
    alignSelf: 'center',
  },
  Icon: {
    display: 'flex',
    alignSelf: 'center',
    marginTop: '20px',
    boxShadow: `8px 7px 9px 2px #600562`,
    borderRadius: '50%',
    height: '400',
    width: 90,
    padding: 7,
  },

  cardHeader: {
    marginBottom: 0,
    padding: 0,
  },
  eventName: {
    marginBottom: '15 0',
    fontWeight: 600,
    fontSize: 70,
    align: 'center',
  },

  cardContent: {
    marginTop: 0,
    paddingTop: 0,
  },

  eventBeginTime: {
    fontSize: 55,
    fontWeight: 600,
  },

  eventEndTime: {
    fontSize: 65,
    fontWeight: 600,
  },
});

const TimeCard = () => {
  const classes = useStyles();
  return (
    <Card className={classes.card}>
      <CardMedia
        className={classes.Icon}
        component="img"
        image={Icon}
      ></CardMedia>
      <CardHeader
        flexGrow={1}
        className={classes.cardHeader}
        title={
          <Typography className={classes.eventName} align="center">
            Event
          </Typography>
        }
      />
      <CardContent className={classes.cardContent}>
        <Typography color={variables.primary.main} variant="h2">
          Begins
          <Typography className={classes.eventBeginTime}>5:00 AM</Typography>
        </Typography>
        <Typography color={variables.white} variant="h2">
          Ends
          <Typography className={classes.eventEndTime}>6:00 AM</Typography>
        </Typography>
      </CardContent>
    </Card>
  );
};
export default TimeCard;

"Time-card-grid" component

import * as React from 'react';
import Grid from '@mui/material/Grid';
import { makeStyles } from '@mui/styles';
import TimeCard from './time-card';

const useStyles = makeStyles({
  timeCardGrid: {
    margin: 0,
  },
});

const TimesGrid = () => {
  const classes = useStyles();
  return (
    <div style={{ maxWidth: '100%' }}>
      <Grid container className={classes.timeCardGrid} wrap="nowrap">
        <TimeCard />
        <TimeCard />
        <TimeCard />
        <TimeCard />
        <TimeCard />
      </Grid>
    </div>
  );
};

export default PrayerTimesGrid;

CodePudding user response：

The minWidth property on your card is what's causing the overflow. The card will never be narrower than 400px, which is wider than a lot of phone screens. If you want everything on the page the maxWidth of the card should be the width of the screen divided by 5. e.g maxWidth: 20vw (20% of the viewport width) or even just width: 20vw and forget about maximum and minimum.

CodePudding user response：

To do what you want, you have to think about the screen size. For instance,

Each card can't be fixed at 400px. Because otherwise you'll have to run into the situation you got. Maybe remove this line:

    minWidth: 400,

And then your TimesGrid can be a flex based. This way all cards can spread out in a row.

const useStyles = makeStyles({
  timeCardGrid: {
    margin: 0,
    display: flex,
    justifyContent: "space-between"
  },
})