1

Tengo un pequeño dilema al momento de hacer un diseño responsive con una sección de testimonio personalizada, en pantallas grandes se visualiza bien sin problema como se ve en la imagen que adjunto.

introducir la descripción de la imagen aquí

EL problema viene cuando se visualiza a través de un mobile, como se ve en la captura la imagen no se centra completamente.

introducir la descripción de la imagen aquí

Aquí esta el css personalizado que me permite realizar esto

.img-text{
    width: 100%;
    height: 350px;
    display: block;
    text-align: center;
    padding: 40% 5%;
    background: #0fb4b0;
    color: #fff;
    border-radius: 15px;    
}

.img-text h2{
    font-size: 25px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.img-text p{
    font-size: 14px;
}

.single-box{
    position: relative;
    margin-bottom: 30px;    
}

.img-area{
    position: absolute;
    width: 100px;
    height: 100px;
    border:5px solid #fff;
    overflow: hidden;
    top: 15px;
    left: 125px;
    border-radius: 50%;
}

.img-area img{
    width: 100%;
}

.carousel-indicators{
    left: 0;
    top: auto;
    bottom: -70px;
}

.carousel-indicators li{
    background: #000;
    border-radius: 50%;
    width: 15px;
    height: 15px;
}

.carousel-indicators :active{
    background: #fff;  
}

La parte de codigo de la pagina es la siguiente

    <div class="container py-3">
    <div id="carouseltesti" class="carousel slide" data-interval="5000" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouseltesti" data-slide-to="0" class="active"></li>
        <li data-target="#carouseltesti" data-slide-to="1"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="row">
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
              <div class="single-box">
                <div class="img-area img-fluid img-responsive">
                  <img src="../../img/web/logo-test.jpg" alt="">
                </div>
                <div class="img-text">
                  <h2>Rodolfo</h2>
                  <p class="text-justify">“Me ayudaron con mi emergencia y no fue doloroso.”</p>
                </div>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
              <div class="single-box">
                <div class="img-area img-fluid">
                  <img src="../../img/web/logo-test.jpg" alt="">
                </div>
                <div class="img-text">
                  <h2>Melissa</h2>
                  <p class="text-justify">“Muy buen servicio y excelente precios.”</p>
                </div>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
              <div class="single-box">
                <div class="img-area img-fluid">
                  <img src="../../img/web/logo-test.jpg" alt="">
                </div>
                <div class="img-text">
                  <h2>Ginger</h2>
                  <p class="text-justify">“La mejor atención y paciencia que eh recibido.”</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row">
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
              <div class="single-box">
                <div class="img-area img-fluid">
                  <img src="../../img/web/logo-test.jpg" alt="">
                </div>
                <div class="img-text">
                  <h2>Roberto</h2>
                  <p class="text-justify">“La Dra. Esther es la mejor una atencion y trato excelente .”</p>
                </div>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
              <div class="single-box">
                <div class="img-area img-fluid">
                  <img src="../../img/web/logo-test.jpg" alt="">
                </div>
                <div class="img-text">
                  <h2>Carolina</h2>
                  <p class="text-justify">“Los mejores odontologos de Rancagua excelente atencion.”</p>
                </div>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
              <div class="single-box">
                <div class="img-area img-fluid">
                  <img src="../../img/web/logo-test.jpg" alt="">
                </div>
                <div class="img-text">
                  <h2>Carlos</h2>
                  <p class="text-justify">“Me realice una limpieza dental y fue la mejor.”</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouseltesti" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouseltesti" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

Alguien me podría dar una mano con este pequeño problema, de antemano les agradezco su colaboración.

4
  • Agrega tu HTML por favor
    – user128299
    Commented el 25 ene. 2021 a las 2:35
  • Ya añadi el codigo html, en mis poco conocimiento creeria que el problema lo tengo con el css.
    – Carrobe90
    Commented el 25 ene. 2021 a las 2:42
  • consulta sobre las @media query de css para sobre escribir las clases de css para una dimensión de pantalla especifica. saludos
    – Jorge
    Commented el 25 ene. 2021 a las 4:25
  • Yo creo que el problema estea en esta regla que defines para .img-area: left: 125px;. Pero si, al agregar tu codigo todo es mas simples e la probabilidad que obtengas la ayuda que necesitas es mucho mayor.
    – dfvc
    Commented el 25 ene. 2021 a las 20:29

1 respuesta 1

0

Efectivamente como lo indicaba Jorge en un comentario la solución radicaba básicamente en implementar los @media screen para la resolución que en este caso soportaría los teléfonos móviles, el código html no se realizo cambio alguno , solo era de modificar el css.

Adjunto el código del css que funciono y me dio la solución de mi problema.

@media screen and (min-width: 0px) and (max-width: 600px){
    .img-text{
        width: 100%;
        height: 250px;
        display: block;
        text-align: center;
        padding: 25% 5%;
        background: #0fb4b0;
        color: #fff;
        border-radius: 15px;    
    }
       
    
    .img-area{
        position: absolute;
        width: 100px;
        height: 100px;
        border:5px solid #fff;
        overflow: hidden;
        top: 15px;
        left: 100px;
        border-radius: 50%;
    }
    
    .img-area img{
        width: 100%;
    }       
   
}

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.