i want to position my :after content in mobile view or in less resolutions

Question

I have HTML and CSS for testimonial, which is in JSFIDDLE DEMO.The problem here is ":after" content is misplacing in mobile view or it is not properly alligned, i need to align it, so that it is need to be in constant position in mobile view as well as normal view, anyone have some ideas?

 <div>
 <div class="testi-inno" id="testi-one">

<p>“this place having some text, which is of lorger or amaller size”</p>
</div>
</div>

<div class="testi-img" style="clear:both;">
<img src="" alt=" " width="70" height="70"/>
 </div>
<p class="testi-par">name of client</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%;
}

JSFIDDLE DEMO

Answer 1

Simple Solution , Just Use Position Relative in " .testi-inno " Because Position:relative Control Position:absolute

 .testi-inno{
    background:#fff;
    margin:10px;
    box-shadow: 10px 10px 5px #888888;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px; 
  }

In Your Case Your After Value= top: 19%; or left: 42%; Work According to Window Walls , but After you use Position:relative, then top :19% or left :42% work accroding to your .testi-inno Div , So It's work Properly on Mobile Device. and Secound mistake is If you need to center the arrow use left : 50%; not 42 % .

 .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;
    bottom: 0%;
    left: 50%;
    margin:0 0 0 -20px;
 }

Just check my JSFIDDLE DEMO -

Answer 2

Just change the .testi-inno p:after to .testi-inno:after and top: 19%; to margin-top: -15px;.

Here's the JsFiddle Link.

E.g.

Modify

.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%;
}

To

.testi-inno: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;
  margin-top: -15px;
  left: 48%;
}

Hope it helps.