пропал блок с фотография ми на сайте
Всем привет! Пропал блок с фотографиями при адаптации сайта. До адаптации загрузил сайт на GIT HUB, всё работет исправно. Вот ссылка на репозиторий: https://github.com/AlexeyGustav/Balloons-desktop-version . Адаптирую от компьютера к мобилке пока на разрешении 600px всё исправно блок виден, но на разрешениях 900px и 1240px он исчез, причём если убираю в инспекторе галочку с display: flex; блок появляется и элементы растягиваются на 100%
Ещё задал это свойство,может оно так повлияло:(но убирая это свойство ничего не меняется)
@include respond(tab-port)
[class^="col-"]
width: 100%
Миксин адаптации
@mixin phone
@media (max-width: 600px)
@content
@mixin respond($breakpoint)
@if $breakpoint == phone
@media (max-width: 600px)
@content
@if $breakpoint == tab-port
@media (max-width: 900px)
@content
@if $breakpoint == tab-land
@media (max-width: 1240px)
@content
@if $breakpoint == big-screen
@media (min-width: 1800px)
@content
КОД HTML
<section class="section-tour">
<div class="text-align-center margin-bottom-80px">
<h2 class="title-secondary">наиболее популярные туры</h2>
</div>
<div class="row">
<div class="col-1-of-3">
<div class="card-tour">
<div class="card-tour__side card-tour__side_front">
<div class="card-tour__img card-tour__img_1 margin-bottom-80px">
<img src="./img/Photo-card-1.jpg" alt="Толпа людей">
</div>
<h4 class="card-tour__title">
<span class="card-tour__span card-tour__span_1">групповые</span>
<br>
<span class="card-tour__span card-tour__span_2">туры</span>
</h4>
<div class="card-tour__dscr">
<ul>
<li><u>Группы от 6 человек</u></li>
<li><u>Продолжительность 2 часа</u></li>
<li><u>В группе 1 гид</u></li>
<li><u>Дальность полета 6км</u></li>
<li><u>Бесплатные сувениры</u></li>
</ul>
</div>
</div>
<div class="card-tour__side card-tour__side_back">
<div class="card-tour__backSide-box">
<p class="card-tour__text card-tour__text_1">полная стоимость:</p>
<p class="card-tour__text card-tour__text_2">28.000₽</p>
<a href="#" class="card-tour__btn btn_animated">забронировать</a>
</div>
</div>
</div>
</div>
<div class="col-1-of-3">
<div class="card-tour">
<div class="card-tour__side card-tour__side_front">
<div class="card-tour__img card-tour__img_2 margin-bottom-80px">
<img src="./img/Photo-card-2.jpg" alt="Вид на шары">
</div>
<h4 class="card-tour__title">
<span class="card-tour__span card-tour__span_1">частные</span>
<br>
<span class="card-tour__span card-tour__span_2">туры</span>
</h4>
<div class="card-tour__dscr">
<ul>
<li><u>Группы от 2 человека</u></li>
<li><u>Продолжительность 1.5 часа</u></li>
<li><u>В группе 1 гид</u></li>
<li><u>Дальность полета 5км</u></li>
<li><u>Бесплатный чай</u></li>
</ul>
</div>
</div>
<div class="card-tour__side card-tour__side_back">
<div class="card-tour__backSide-box">
<p class="card-tour__text card-tour__text_1">полная стоимость:</p>
<p class="card-tour__text card-tour__text_2">20.000₽</p>
<a href="#" class="card-tour__btn btn_animated">забронировать</a>
</div>
</div>
</div>
</div>
<div class="col-1-of-3">
<div class="card-tour">
<div class="card-tour__side card-tour__side_front">
<div class="card-tour__img card-tour__img_3 margin-bottom-80px">
<img src="./img/Photo-card.jpg" alt="Смотровая площадка">
</div>
<h4 class="card-tour__title">
<span class="card-tour__span card-tour__span_1">смотровые</span>
<br>
<span class="card-tour__span card tour__span_2">площадки</span>
</h4>
<div class="card-tour__dscr">
<ul>
<li><u>Группы от 8 человек</u></li>
<li><u>Продолжительность 2.5 часа</u></li>
<li><u>В группе 1 гид</u></li>
<li><u>Дальность полета 7км</u></li>
<li><u>Бесплатный чай и сувениры</u></li>
</ul>
</div>
</div>
<div class="card-tour__side card-tour__side_back">
<div class="card-tour__backSide-box">
<p class="card-tour__text card-tour__text_1">полная стоимость:</p>
<p class="card-tour__text card-tour__text_2">30.000₽</p>
<a href="#" class="card-tour__btn btn_animated">забронировать</a>
</div>
</div>
</div>
</div>
</div>
<div class="text-align-center text-align-center__pading">
<a href="#" class="btn btn_animated">наш каталог</a>
</div>
</section>
Тут всё нормально.
КОД из SASS
.card-tour
height: 50rem
perspective: 150rem
-moz-perspective: 150rem
position: relative
@include respond(tab-port)
height: 55rem
&__side
box-shadow: $box-shadow
height: 50rem
transition: .8s all ease-out
position: absolute
top: 0
left: 0
width: 100%
backface-visibility: hidden
border-radius: .5rem
overflow: hidden
@include respond(tab-land)
height: 55rem
@include respond(tab-port)
width: 63%
height: 55rem
left: 10rem
&_front
&_back
background: green
transform: rotateY(180deg)
background: linear-gradient(90deg, $color-brown, $color-light)
&:hover &__side
transform: rotateY(-180deg)
&:hover &__side_back
transform: rotateY(0deg)
&__img
height: 21rem
object-fit: cover
background-blend-mode: hard-light
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 89%)
&_1
background-image: url(./img/Photo-card-1.jpg)
&_2
background-image: url(./img/Photo-card-2.jpg)
&_3
background-image: url(./img/Photo-card.jpg)
@include respond(tab-land)
height: 28rem
@include respond(tab-port)
height: 31rem
&__title
font-weight: 300
font-size: 2.8rem
text-transform: uppercase
text-align: right
letter-spacing: .2rem
position: absolute
top: 18rem
right: 0
@include respond(tab-land)
top: 24rem
@include respond(tab-port)
top: 25rem
font-size: 3.3rem
&__span
color: $color-white
background: linear-gradient(90deg, $color-brown, $color-light)
padding: 1rem 2rem .3rem 2rem
&_1
&_2
position: absolute
top: 3.4rem
right: 0
padding-bottom: 1rem
&__dscr
@include respond(tab-port)
margin-top: 100rem
ul
list-style: none
margin: 0 auto
li
font-weight: 500
letter-spacing: .3rem
line-height: 1.5rem
font-size: $font-size-paragraph
color: $color-gray
text-align: center
@include respond(tab-port)
font-size: 2rem
&:not(:last-child)
margin-bottom: 2rem
@include respond(tab-land)
margin-bottom: 1.7rem
@include respond(tab-port)
margin-top: 2rem
margin-bottom: 2rem
&__backSide-box
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
&__text
margin-bottom: 8rem
letter-spacing: .2rem
text-transform: uppercase
text-align: center
color: $color-white
&_1
font-size: $font-size-paragraph
width: 90%
font-weight: 300
&_2
font-size: 6rem
font-weight: 500
&__btn
&:link, &:visited
@include style-link($color-gray)
padding: 2rem 3rem 0rem 3rem
background-color: $color-white
border-radius: 5rem
transition: all .3s
font-size: 2rem
&:hover
transform: translateY(-4px)
box-shadow: $box-shadow
&::after
opacity: 0
transform: scaleX(1.5) scaleY(1.7)
&:active
transform: translateY(-2px)
box-shadow: $box-shadow
&::after
content: ""
background: $color-white
width: 100%
height: 100%
border-radius: 5rem
display: inline-block
top: 0
left: 0
z-index: -1
transition: all .4s
&_animated
animation: BtnToUp .5s ease-out .7s
animation-fill-mode: backwards
.text-align-center__pading
padding-bottom: 4rem
КОД сетки SASS
.row
display: flex
flex-direction: row
max-width: $grid-width
margin: 0 auto
&:not(:last-child)
margin-bottom: $margin-vertical-big
.col-1-of-3
width: calc((100% - 2 * #{$gutter-horizontal}) / 3)
margin: 0 auto
@include respond(tab-port)
margin-bottom: 2rem