Is there a way to adjust the width of the card on small screen sizes? It appears too small.
You can view my recreation on codesandbox here: https://codesandbox.io/s/nameless-darkness-d8tsq9?file=/demo.js
The width seems inadequate for this particular screen size:
https://i.stack.imgur.com/8C5Mq.png https://i.stack.imgur.com/BHu1v.png
Here is the code snippet:
export default function ImgMediaCard() {
return (
<section style={{ padding: "5rem", flexGrow: "1" }}>
<Box sx={{ display: "flex", justifyContent: "center", flexWrap: "wrap" }}>
<Card sx={{ maxWidth: 350, margin: "1rem" }}>
<CardMedia
component="img"
alt="green iguana"
height="200"
image="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Lizard
</Typography>
<Typography variant="body2" color="text.secondary">
Lizards are a widespread group of squamate reptiles, with over
6,000 species, ranging across all continents except Antarctica
</Typography>
</CardContent>
<CardActions>
<Button size="small">Share</Button>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
{/* 2nd card */}
<Card sx={{ maxWidth: 350, margin: "1rem" }}>
<CardMedia
component="img"
alt="green iguana"
height="200"
image="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Lizard
</Typography>
<Typography variant="body2" color="text.secondary">
Lizards are a widespread group of squamate reptiles, with over
6,000 species, ranging across all continents except Antarctica
</Typography>
</CardContent>
<CardActions>
<Button size="small">Share</Button>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</Box>
</section>
);
}