1

tengo un problema, cuando se muestra la web en mi pc, el tamaño de la seccion de noticias, se supone que deben ver un fila de 4 imagenes, pero solo me muestra 2 filas, donde la primera fila son las tres imagenes, y la segunda fila aparece la 4 imagen, introducir la descripción de la imagen aquí

      <div class="text-center mx-auto pb-4 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  row-cols-1 row-cols-md-3 g-4">
              <div class="col" style="max-width: 300px">
                <div class="card h-100">
                  <img 
                    src="img/portal_alto_mirasol.png"
                    style="max-width: 300px"
                    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" style="max-width: 300px">
                <div class="card h-100">
                  <img
                    src="img/vista_cordillera.png"
                    style="max-width: 300px"
                    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" style="max-width: 300px">
                <div class="card h-100">
                  <img
                    src="img/escuela_compu.png"
                    style="max-width: 300px"
                    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" style="max-width: 300px">
                <div class="card h-100">
                  <img
                    src="img/casa_pauly.png"
                    style="max-width: 300px"
                    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>

aca esta el css cada vez que aumento el width a 100%, me afecta en tamaño pequeño, como se demuestra en la imagen:(, eso me sucede cuando solo modifico esas propiedades, primera foto me resulta bien todo centrado en tamaño pequeño, pero cuando aumento a 100%, el tamaño de foto me queda bien me junta las 4 fotos, en una fila. :(

introducir la descripción de la imagen aquí

   .center{
    width: 75%;
    margin: 0px auto;
}
2
  • Puedes crear un ejemplo mínimo verificable en la pregunta misma a través de un snippet (con el botón que indica <>). Si lo haces, no olvides agregar la librería de Bootstrap.
    – padaleiana
    Commented el 30 nov. 2022 a las 19:59
  • no se como es, pero es algo asi, enlace, el News aggregator Commented el 30 nov. 2022 a las 20:37

1 respuesta 1

1

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.

4
  • ah, okey, vale pa gracias, una duda es mejor dividir por class, o aplicarlas a una sola clase, o depende? Commented el 30 nov. 2022 a las 20:55
  • Puedes dividirlo mediante las clases de bootstrap (recomendado) o también con los estilos css, a tu gusto. Commented el 30 nov. 2022 a las 20:58
  • 1
    ah, okey pa gracias, me resolviste mi problema :), gracias!! Commented el 30 nov. 2022 a las 20:59
  • 1
    Un gusto poder ayudarle, saludos! Commented el 30 nov. 2022 a las 20:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.