I've encountered an issue with the sizing of my React Social Card component. Despite trying to maintain consistency in size across all cards, the first one appears significantly larger than the rest. My limited familiarity with Bootstrap has hindered my efforts to address this discrepancy through CSS modifications. I sought assistance on Codesandbox by exporting the project from my Github repository; however, a frustrating error surfaced: "Error importing GitHub repository: Could not find package.json."
If anyone can offer guidance or a solution to this problem, please let me know. Below, I'll attach a screenshot for visual clarity along with snippets of the relevant components and CSS file. You can access the complete code on my Github repository via this link: https://github.com/jevoncochran/React-Social-Card
Here's the Cards component:
import React, { Component } from "react";
import Card from "./CardUI";
import img1 from "../assets/me-telice-pelo.jpg";
import img2 from "../assets/me-pernambues.jpg";
import img3 from "../assets/me-lucas-walking-pernambues.jpg";
class Cards extends Component {
render() {
return (
<div className="container-fluid d-flex justify-content-center">
<div className="row">
<div className="col-md-4">
<Card imgsrc={img1} title="Convergeance" />
</div>
<div className="col-md-4">
<Card imgsrc={img2} title="Continuation" />
</div>
<div className="col-md-4">
<Card imgsrc={img3} title="Conspiracy" />
</div>
</div>
</div>
);
}
}
export default Cards;
And here is the corresponding CSS:
body {
background: radial-gradient(#e5e5e5, #ffff, #e5e5e5);
}
.card {
width: 20rem;
}
.card:hover {
box-shadow: 5px 10px 20px 1px rgba(0,0,0,0.253) !important;
}
.card-body {
padding: 3rem 0 !important;
}
.card-text {
font-size: 0.9rem;
padding: 0.4rem 1.9rem;
}
.container-fluid .row {
padding: 6rem;
}
.overflow {
overflow: hidden;
}
.card-img-top {
transform: scale(1);
transition: transform 0.5s ease;
}
.card-img-top:hover {
transform: scale(1.4);
}