Я хочу расположить свое: после контента в мобильном представлении или в меньшем разрешении

Question

У меня есть HTML и CSS для отзыва, который находится в JSFIDDLE DEMO. Проблема здесь заключается в том, что: "после" содержимое неуместно в мобильном представлении или неправильно выровнено, мне нужно выровнять его так, чтобы оно было постоянным Позиция в мобильном виде, а также в обычном режиме, у кого-нибудь есть идеи?

 <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

Простое решение, просто используйте относительную позицию в " .testi-inno ", потому что позиция: относительная позиция управления: абсолютная

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

В вашем случае ваше значение после = сверху: 19%; или слева: 42%; Работайте в соответствии с Window Walls, но после того, как вы используете Position: относительный, то сверху: 19% или слева: 42% работают в соответствии с вашим.testi-inno Div, так что это работает правильно на мобильном устройстве. и второстепенная ошибка: если вам нужно отцентрировать стрелку, используйте влево: 50%; не 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;
 }

Просто проверьте мой JSFIDDLE DEMO -

Answer 2

Просто измените .testi-inno p:after в .testi-inno:after а также top: 19%; в margin-top: -15px;,

Вот ссылка JsFiddle.

Например

изменять

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

Надеюсь, поможет.