У меня проблема с текстом. он съехал сам по себе. что можно сделать?

Question

[otgorn]

<section class="section2">
    <div class="container">
      <div class="wrapper-1" >
        <div class="safity">
          <div class="safity-img"><img src="img/z22.png" alt=""></div>
          <div class="safity-h2"><h2>Безопасность</h2></div>
          <div class="safity-p"><p>Усиленная безопасность<br/> ваших обменов, усиленная <br> безопасность от <br> мошенников!</p></div>
        </div>
        <div class="ref">
          <div class="ref-img"><img src="img/Untitled-1 3.png" alt=""></div>
          <div class="ref-h2"><h2>Реферальная система</h2></div>
          <div class="ref-p"><p>На сервисе работает партнерская <br> программа , за каждый обмен <br>приведенного вами клиента, вы <br>получаете 0.5% с нашей прибыли.</p></div>
        </div>
        <div class="support">
          <div class="support-img"><img src="img/Untitled-1z1.png" alt=""></div>
          <div class="support-h2"><h2>Онлайн поддержка</h2></div>
          <div class="support-p"><p>Четыре вида поддержки для<br>наших клиентов:Телеграмм<br>канал,E-mail поддержка, и<br>мобильный номер (Viber).</p></div>
        </div>
      </div>
    </div>
  </section>

.wrapper-1{

	display: flex;
 
justify-content:space-between;*/
padding-top: 98px;

}
.safity-img{

left: 300px;

}

.safity-h2{

padding-right: 400px;
}

.safity-p{
	font-family: 'Rubik';
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	
}
.ref-h2{
padding-right: 400px;
margin-bottom: 10px;


}

.ref-p{
	font-family: 'Rubik';
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	
}
.support-p{
	font-family: 'Rubik';
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	
}

Comments

[Анатолий Выскуб]

А если убрать зум в браузере?

Answer 1

[SheDeMere]

для саппорта задай строгую высоту.
.supprort {
height: 300px; //к примеру
}
еще можно убрать line-height

Comments

[otgorn]

спасибо,получилось. я задал строгую высоту, но line-height пришлось оставить, без него текст сплюсщивается.

Answer 2

[Анатолий Выскуб]

Уберите padding для h2, а также увеличение в браузере

.wrapper-1{

display: flex;
 
justify-content:space-between;
padding-top: 98px;
}

.safity,
.ref,
.support{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.safity-img{
left: 300px;
}

.safity-p{
  font-family: 'Rubik';
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
}

.ref-h2{
margin-bottom: 10px;
}

.ref-p{
  font-family: 'Rubik';
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
}

.support-p{
  font-family: 'Rubik';
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
}

Comments

[otgorn]

спасибо большое) сработало