Are you struggling with achieving equal height for multiple project cards? Look no further, as I have a simple solution for you. While trying to make your project cards equal in height, width, evenly spaced, and centered, you might find flex-box helpful. However, getting the equal height part right can be tricky. In my experience, using just a few lines of CSS might not cut it. Let me help you out with that.
In order to assist you better, I would need to take a look at two out of the six articles from your JSX and CSS files. By examining these samples, I can provide insights on how to achieve the desired outcome. Keep in mind that utilizing imported classes from react Material UI can impact the styling of your components.
div {
text-align: center;
}
article {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
display: inline-flex;
justify-content: space-evenly;
align-items: stretch;
margin: 20px;
flex-grow: 1;
}<div>
<article>
<Card className={classes.card}>
<CardActionArea>
<CardMedia component="img" alt="Workflow Project" height="140" image={WorkFlow} title="Workflow Project" />
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Work Flow
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
A full stack web application. The front end uses React, Redux, and React Router. The backend uses Firebase. The web application is a way for multiple people to post projects to be seen by all users. It is complete with login/signup, authentication, cloud
functions, storing all data in a database, and live notifications. It is super Mario themed.
</Typography>
<br />
<Typography variant="body2" color="textSecondary" component="p">
When visiting the site use the credentials <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a474b5843456a5e4f595e04494547">[email protected]</a> and test1234 to login. Or feel free to make an account.
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<a href="https://work-flow-web-app.firebaseapp.com/" target="_blank" rel="noopener noreferrer">
<Button size="small" color="primary">
Visit Site
</Button>
</a>
<a href="https://github.com/Amalazing/Work-Flow" target="_blank" rel="noopener noreferrer">
<Button size="small" color="primary">
Visit Code
</Button>
</a>
</CardActions>
</Card>
</article>
<article>
<Card className={classes.card}>
<CardActionArea>
<CardMedia component="img" alt="Exercise Tracker" height="140" image={MERN} title="Exercise Tracker" />
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Exercise Tracker
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
This project is a web application that allows multiple people to track and compare exercises. I wrote this project using the MERN stack. I used React for the front end and Node (with Express), MongoDB (Atlas) on the back end. React interacts with the
Node API using Axios HTTP requests.
</Typography>
<br />
<Typography variant="body2" color="textSecondary" component="p">
By visiting the video you will be sent to a Vimeo page where you can view the project in action!
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<a href="https://vimeo.com/355889426" target="_blank" rel="noopener noreferrer">
<Button size="small" color="primary">
Visit Video
</Button>
</a>
<a href="https://github.com/Amalazing/MERN-Exercise-Tracker" target="_blank" rel="noopener noreferrer">
<Button size="small" color="primary">
Visit Code
</Button>
</a>
</CardActions>
</Card>
</article>