@Marizza40

Мобильная версия совместно с display: flex?

Добрый день! Подскажите пожалуйста, использую «display: flex» для блоков. Но в мобильной версии блок заезжает на другой, а необходимо, чтобы блоки вставали как при «flex-direction: column». Через media не воспринимает почему-то. Я начинающий, поэтому напишите пожалуйста понятнее. Заранее спасибо за ответы.
<div class="proect">
   <div class="container">
       
  <div class="proect_realizm">
     <div class="proect_inner">
         <div class="proect_img">
            <img src="https://i.ibb.co/1z69xk8/54684.jpg" class="proect_img_img">
         </div><!--/.proect_img-->
         <div class="proect_txt">
            <span class="proect_txt_h1">Долгодеревенское</span>
             <div class="text_proect">
            <p class="proect_txt_txt"> 
                Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д.
            </p>
             <p class="proect_txt_txt"> 
                Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д.
            </p>
            </div><!--/.text_proect--> 
             <div class="icon_proect">
             <div class="proect_icon">
                <img src="https://i.ibb.co/4dkGjxK/calendar.png" class="proect_img_icon">
                 <p class="proect_text">
                     Разработка проекта
                 </p>
             </div><!--/.proect_icon-->
             <div class="proect_icon">
                <img src="https://i.ibb.co/k6TrM6C/icons8-engineer-80.png" class="proect_img_icon">
                 <p class="proect_text">
                     Задействованны на реализацию проекта
                 </p>
             </div><!--/.proect_icon-->
             <div class="proect_icon">
                <img src="https://i.ibb.co/GxKLfN5/icons8-brief-64.png" class="proect_img_icon_с1">
                 <p class="proect_text">
                     Реализация проекта с "нуля"
                 </p>
             </div><!--/.proect_icon-->
                 </div><!--/.icon_proect-->
             </div><!--/.proect_txt-->
     </div><!--/.proect_inner-->  
     <div class="proect_inner">
         <div class="proect_img">
            <img src="https://i.ibb.co/1z69xk8/54684.jpg" class="proect_img_img">
         </div><!--/.proect_img-->
         <div class="proect_txt">
            <span class="proect_txt_h1">Долгодеревенское</span>
             <div class="text_proect">
            <p class="proect_txt_txt">
                Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д.
            </p>
             <p class="proect_txt_txt"> 
                Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д.
            </p>
             </div><!--/.text_proect--> 
             <div class="icon_proect">
             <div class="proect_icon">
                <img src="https://i.ibb.co/4dkGjxK/calendar.png" class="proect_img_icon">
                 <p class="proect_text">
                     Разработка проекта
                 </p>
             </div><!--/.proect_icon-->
             <div class="proect_icon">
                <img src="https://i.ibb.co/k6TrM6C/icons8-engineer-80.png" class="proect_img_icon">
                 <p class="proect_text">
                     Задействованны на реализацию проекта
                 </p>
             </div><!--/.proect_icon-->
             <div class="proect_icon">
                <img src="https://i.ibb.co/GxKLfN5/icons8-brief-64.png" class="proect_img_icon_с1">
                 <p class="proect_text">
                     Реализация проекта с "нуля"
                 </p>
             </div><!--/.proect_icon-->
                 </div><!--/.icon_proect-->
             </div><!--/.proect_txt-->
     </div><!--/.proect_inner--> 
    </div><!--/.proect_realizm--> 
       
</div><!--/.container-->            
</div><!--/.proect-->


/*proect*/

.proect_realizm {
    display: flex;
    flex-flow: wrap;
}

.proect_inner{
    display: flex;
    padding-top: 25px;
    width: 50%;
    padding-bottom: 25px;
    padding-right: 15px;
}

.proect_img_img{
    width: 180px;
}
.proect_txt_h1{
    padding: 5px;
}
.proect_txt{
    padding: 0 20px 20px 20px;
    display: table;
}
.proect_txt_h1{
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: right;
    padding: 5px 0;
    color: #0092db;
}
.text_proect{
    width: 100%;
}
.proect_txt_txt{
    padding: 10px 0;
    font-size: 14px;
    text-align: left;
    color: #000;
    font-family:Roboto;
    line-height: 1.5;
    width: 100%;
}
.icon_proect{
    display: flex;
    width: 100%;
}
.proect_icon{
    width: 40%;
    text-align: center;
}
.proect_img_icon_с1{
    width: 100px;
    padding-bottom: 8px;
}
.proect_img_icon{
    width: 70px;
    padding-bottom: 12px;
}
.proect_text{
    font-size: 12px;
    color: #000;
    font-family: Roboto;
    line-height: 1.5;
}
  • Вопрос задан
  • 260 просмотров
Пригласить эксперта
Ответы на вопрос 1
Anitamsk
@Anitamsk
Frontend Dev
Попробуйте сбросить кэш браузера, у вас всё написано правильно, но когда вы используете укороченное flex-flow: wrap - лучше тогда писать flex-flow: column wrap;.
5d676bc94a101380196457.png
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы