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.
EL problema viene cuando se visualiza a través de un mobile, como se ve en la captura la imagen no se centra completamente.
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.
.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.