El problema es que le estás dando un ancho fijo a cada tarjeta con la propiedad max-width: 300px
, de la cual no se tomará en cuenta el ancho que toma los col
dentro del row
, es por eso que las tarjetas no se estiran del todo bien cuando la resolución de pantalla es cada vez más pequeña. A cada tarjeta, le apliqué las siguientes clases:
<div class="col-lg-3 col-sm-6"> <!-- Este es el nuevo cambio para cada tarjeta -->
<div class="card h-100">
<img
src="https://i.imgur.com/rc4Zbbw.jpg"
style="width: 100%;"
class="card-img-top logo-1 col-4"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Portal Altos de Mirasol II</h5>
<p class="card-text">
Asesoría a la Fiscalización Técnica de Obras DS-49 "Portal
Altos de Mirasol II", Puerto Montt.
</p>
<p class="card-text">
<small class="text-muted">En Ejecucion...</small>
</p>
</div>
</div>
</div>
En donde:
// col-lg-3 => en el ancho "lg" de la pantalla ocupará las 4 tarjetas en 1 fila
// col-sm-6 => en el ancho "sm" de la pantalla ocupará solo 2 tarjetas en 2 filas
Y para que esto funcione, tu clase row
, que encierra las 4 tarjetas, tendría que estar de la siguiente manera:
<div class="row g-4">
// ...
</div>
Ahora para arreglar lo de las imágenes, apliqué los siguientes cambios para que ocupe siempre el 100% del ancho de la tarjeta y no haya espacio de sobra:
<img
src="https://i.imgur.com/rc4Zbbw.jpg"
style="width: 100%;" <!-- Este es el nuevo cambio -->
class="card-img-top col-4"
alt="..."
/>
Y también en tu clase .center
no es necesario que apliques la propiedad width: 75%;
, esto solo hará que las tarjetas estén mal posicionadas, les di las siguientes propiedades para que tenga un mejor resultado:
.center{
padding: 20px;
margin: 0px auto;
}
Tu código final sería el siguiente:
.center{
padding: 20px;
margin: 0px auto;
}
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="text-center mx-auto wow fadeInUp" data-wow-delay="0.1s" >
<a href="noticias.html" class="btn py-3 px-5 animated slideInRight">
<h1 class="display-5 mb-4">Noticias</h1>
</a>
</div>
<div class="center">
<section id="content">
<div class="row g-4">
<div class="col-lg-3 col-sm-6">
<div class="card h-100">
<img
src="https://i.imgur.com/rc4Zbbw.jpg"
style="width: 100%;"
class="card-img-top logo-1 col-4"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Portal Altos de Mirasol II</h5>
<p class="card-text">
Asesoría a la Fiscalización Técnica de Obras DS-49 "Portal
Altos de Mirasol II", Puerto Montt.
</p>
<p class="card-text">
<small class="text-muted">En Ejecucion...</small>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card h-100">
<img
src="https://i.imgur.com/rc4Zbbw.jpg"
style="width: 100%;"
class="card-img-top col-4"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Proyecto Vista Cordillera</h5>
<p class="card-text">
Asesoría a la Fiscalización Técnica de Obras DS-49 "Proyecto
Vista Cordillera", Puerto Montt.
</p>
<p class="card-text">
<small class="text-muted">En Ejecucion...</small>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card h-100">
<img
src="https://i.imgur.com/rc4Zbbw.jpg"
style="width: 100%;"
class="card-img-top col-4"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Escuela Rural Compu</h5>
<p class="card-text">
Asesoría a la Inspección Fiscal de la obra reposición escuela
rural Compu, comuna Quellón.
</p>
<p class="card-text">
<small class="text-muted">En Ejecucion...</small>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card h-100">
<img
src="https://i.imgur.com/rc4Zbbw.jpg"
style="width: 100%;"
class="card-img-top col-4"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">
Inspección Fiscal Conservación Casa Pauly
</h5>
<p class="card-text">
Asesoría a la Inspección Fiscal Conservación Casa Pauly,
Puerto Montt.
</p>
<p class="card-text">
<small class="text-muted">En Ejecucion...</small>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
En el siguiente enlace podrás ver mejor los resultados.