So, I'm doing this portfolio tutorial, and the code is basically correct, but for me the css part has no affect on the output. the code is correct, but i'm not sure why... My repo link: Porfolio react app
Here is my html code
<h3 className="font-bold">Take a look of our projects</h3>
<hr />
<div className="row">
{projectsdata.map(project => {
return <div className="col-md-4">
<div className="position-relative project">
<img src={project.image} alt='' />
</div>
</div>
})}
</div>
And Here is my Css code:
[.projects-intro .primary-button{
background-color: blue;
color: white;
font-weight: bold;
}
.project{
padding: 20px ;
border: 1px solid rgba(0, 0, 0, 0.486);
}
.project img{
height: 220px !important;
width:100% !important;
}]
It's meant to look like this.2Image
But mine shows up like this:3Image
try to set the width, then set the height to auto
.project img{
height: auto;
width: 220px;
}
don't use the important only if you want to override a 3rd party library
however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets -- Mozilla Specificity