I am working on a hiring page project to practice React and I can't figure out a way to style these cards properly
I want to style these cards in a way (sorry, I can't post images yet) that when I resize the page, inspect element, open in mobile view etc, it resizes on its own and not go outside the dimensions of the main page.
Code for Card component
const Card = () => {
return openingData.map((el) => {
return (
<div className="card-container card">
<div className="positions-container">{el.positions}</div>
<div className="image-container">
<img src={el.logo} alt="" height="375" width="475" />
</div>
<div className="card-content">
<div clasName="title-container">
<b>
<h3>{el.title}</h3>
</b>
</div>
<div className="message-container">
<h5>{el.message}</h5>
</div>
</div>
<div className="button-container">
<button className="buttons btn">Join Now!</button>
</div>
</div>
);
});
};
Code for Card-list component
const CardList = () => {
return (
<div className="card-list">
<Card />
</div>
);
};
CSS
.card-container {
display: flex;
flex-direction: column;
border: 1px solid rgba(1, 1, 1, 0.922);
border-radius: 25px;
padding: 25px;
cursor: pointer;
transform: translateZ(0);
transition: transform 0.25s ease-out;
}
.card-container:hover {
transform: scale(1.05);
}
.card-list {
width: 85vw;
margin: 0 auto;
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
You need to add globally
img {
max-width: 100%;
}
give appropriate dimensions to your card.container
so that all the content can have their boundary by specifying max-width
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.