Entonces, estoy haciendo este tutorial de portafolio, y el código es básicamente correcto, pero para mí, la parte css no tiene efecto en la salida. el código es correcto, pero no estoy seguro de por qué... Mi enlace de repositorio: Porfolio reaccionar aplicación
Aquí está mi código html
<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>Y aquí está mi código Css:
[.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; }]Está destinado a verse así. 2 Imagen
Pero el mío aparece así: 3 Imagen
intente establecer el ancho, luego establezca la altura en automático
.project img{ height: auto; width: 220px; }no use lo importante solo si desea anular una biblioteca de terceros
sin embargo, es una mala práctica y debe evitarse porque dificulta la depuración al romper la cascada natural en sus hojas de estilo -- Especificidad de Mozilla