0

Не пойму из-за чего текст вылазит за блок ?

@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900);
.first-item {
   display: flex;
   align-items: center;
   height: 7.556vh;
   width: 38.542vw;
   opacity: 0.7;
   filter: drop-shadow(0px 6px 8px rgba(0, 0, 0, 0.25));
   background: linear-gradient(90.49deg, #007EFF 0.42%, rgba(0, 0, 0, 0.6) 95.58%);
   box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
   backdrop-filter: blur(1.389vh);
   border-radius: 1.389vh;
}

.first-item__img {
   height: 5.556vh;
   width: 5.556vh; 
   padding: 1.189vh 1.389vh 0 1.389vh;
}

.first-item__progress {
   border-bottom: 0.412vh solid #FFFFFF;
}

.first-item__text {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   font-size: 2.03704vh;
   line-height: 1.3;
   display: flex;
   align-items: center;
   letter-spacing: -0.05em;
   color: #FFFFFF;
   text-shadow: 0px 0.4px 4px rgba(0, 0, 0, 0.5);
}

.first-item {
    display: block;
    -webkit-animation: fadeOut 3s linear forwards;
    -moz-animation: fadeOut 3s linear forwards;
    -o-animation: fadeOut 3s linear forwards;
    -ms-animation: fadeOut 3s linear forwards;
    animation: fadeOut 3s linear forwards;
}

.first-item .first-item__progress {
    -webkit-animation: runProgress 2s linear forwards 0.7s;
    -moz-animation: runProgress 2s linear forwards 0.7s;
    -o-animation: runProgress 2s linear forwards 0.7s;
    -ms-animation: runProgress 2s linear forwards 0.7s;
    animation: runProgress 2s linear forwards 0.7s;
}

@-webkit-keyframes fadeOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; -webkit-transform: translateY(0px);}
    99% { opacity: 0; -webkit-transform: translateY(-25px);}
    100% { opacity: 0; }
}

@-webkit-keyframes runProgress {
    0%{ width: 0%; }
    100%{ width: 94%; }
}

@-moz-keyframes runProgress {
    0%{ width: 0%; }
    100%{ width: 94%; }
}

@-o-keyframes runProgress {
    0%{ width: 0%; }
    100%{ width: 94%; }
}

@-ms-keyframes runProgress {
    0%{ width: 0%; }
    100%{ width: 94%; }
}

@keyframes runProgress {
    0%{ width: 0%; }
    100%{ width: 94%; }
}
<div id="app" class="wraper">
      <div class="notifacation" id="notifacation">
         <section class="first-item">
            <img class="first-item__img" src="img/infocircle.png" alt="infocircle">
            <p class="first-item__text">Текстовый текст, что б его! Текстовый текст, что б его! <br>
            Текстовый текст, что б его! Текстовый текст, что б его!</p>
            <div class="first-item__progress"></div>
         </section>
      </div>
   </div>  

1 ответ 1

0

.first-item__img {
    float: left;
   height: 5.556vh;
   width: 5.556vh; 
   padding: 1.189vh 1.389vh 0 1.389vh;
}

Bопрос решен

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.