Skip to main content
se eliminaron 12 caracteres en el cuerpo
Origen Enlace
Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31

El problema es que le estás dando un ancho fijo a cada tarjeta con la propiedad max-width: 300pxmax-width: 300px, de la cual no se tomará en cuenta el ancho que toma los colcol dentro del rowrow, 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>
// col-lg-3 => en el ancho "lg"'lg' de la pantalla ocupará las 4 tarjetas en 1 fila
// col-sm-6 => en el ancho "sm"'sm' de la pantalla ocupará solo 2 tarjetas en 2 filas

Y para que esto funcione, tu clase rowrow, que encierra las 4 tarjetas, tendría que estar de la siguiente manera:

<img
  src="https://i.imgur.com/rc4Zbbw.jpg"
  style="width: 100%;" <!-- Este es el nuevo cambio -->
  class="card-img-top col-4"
  alt="..."
/>
<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.center no es necesario que apliques la propiedad width: 75%;width: 75%;, esto solo hará que las tarjetas estén mal posicionadas, les di las siguientes propiedades para que tenga un mejor resultado:

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>
// 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:

<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:

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>
// 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:

<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:

Origen Enlace
Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31

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.