Здравствуйте! При адаптации на первом скачке
media (max-width: 1199px) не работает свойство transition. При дальнейшем уменьшении экрана 991px, 767px.... все работает. Уже методом тыка начал делать, везде подставлять transition, все равно не работает на 1199px плавный переход. Подскажите пожалуйста, в чем проблема и как исправить.
https://codepen.io/fcyzyjnk-the-decoder/pen/JjeOVRv
HTML
<body>
<!-- Верхняя шапка -->
<section class="header-top">
<div class="container header-top__container">
<!-- Левая часть верхней шапки -->
<div class="header-top__left">
<!-- Номер телефона -->
<div class="header-top__mobile">
<figure class="header-top__mobile-icon">
<img src="icons/mobile.svg" alt="Иконка мобильного">
</figure>
<div class="header-top__mobile-number"><a href="tel:+7922 022-94-82">+7 (922) 022-94-82</a></div>
</div>
<!-- Почта -->
<div class="header-top__mail">
<figure class="header-top__mail-icon">
<img src="icons/mail.svg" alt="Иконка почты">
</figure>
<div class="header-top__mail-address"><a href="mailto:janis62@yahoo.com">janis62@yahoo.com</a>
</div>
</div>
</div>
<!-- Правая часть верхней шапки -->
<div class="header-top__right">
<a href="#">Заказать звонок</a>
</div>
</div>
</section>
</body>
SASS
body
font-family: 'Nunito Sans', sans-serif
color: #222
font-size: 14px
.container
max-width: 1320px
margin: 0 auto
padding: 0 10px
transition: 0.5s all
// Верхняя шапка
.header-top
background-color: #010101
&__container
min-height: 52px
display: flex
justify-content: space-between
align-items: center
&__left
display: flex
align-items: center
a
color: #fff
&__mobile
display: flex
align-items: center
margin-right: 28px
min-height: 20px
&__mobile-icon
margin-right: 12px
height: 21px
&__mobile-number
&__mail
display: flex
align-items: center
&__mail-icon
margin-right: 12px
height: 15px
&__mail-address
&__right
a
color: $color-blue
font-weight: bold
//==================================//
// Мобильная версия
// max-width: 1199px
@media (max-width: 1199px)
.container
width: 960px
// max-width: 991px
@media (max-width: 991px)
.container
width: 720px
// max-width: 767px
@media (max-width: 767px)
.container
width: 540px
// max-width: 575px
@media (max-width: 575px)
.container
width: 100%
.header-top
&__mail
display: none
Простой
Простой
