I have a testimonial section built with HTML and CSS. You can view the demo on JSFIDDLE HERE. In the mobile view, I am facing an issue where the ":after" content is not aligning properly or appears misplaced. I'm looking for ideas to ensure that it remains in a constant position in both mobile and normal views. Any suggestions?
<div>
<div class="testi-inno" id="testi-one">
<p>“Lorem ipsum dolor sit amet”</p>
</div>
</div>
<div class="testi-img" style="clear:both;">
<img src="" alt=" " width="70" height="70"/>
</div>
<p class="testi-par">Client Name</p>
<p class="testi-paras">Designation</p>
</div>
CSS:
.testi-inno p:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
border-right: 20px solid transparent;
border-top: 20px solid #fff;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
top: 19%;
left: 42%;
}
.testi-inno{
background:#fff;
margin:10px;
box-shadow: 10px 10px 5px #888888;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.testi-inno p{
margin:15px;
margin-bottom:15px !important;
padding-top: 10%;
padding-bottom: 10%;
}
.testi-img img{
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
width: 80px;
height: 80px;
margin-top: 7%;
margin-left: 34%;
}