Есть две колонки (в одной текст, в другой картинка) и они расположены в одну строчку на экране. На 1920x1080
всё хорошо, но при уменьшении экрана:
containerWithiTwoRow {
display: flex;
justify-content: center;
width: 100%;
height: 600px;
margin-top: 30px;
}
columCAR {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-family: 'Montserrat', sans-serif;
width: 50%;
height: 90%;
}
.rowInColumn {
display: flex;
flex-direction: row;
}
.backgroundRow {
display: flex;
background-image: url(/images/rigth.jpg);
flex-direction: row;
overflow: hidden;
}
<div class="containerWithiTwoRow">
<div class="columCAR">
<div class="rowInColumn">
<h3 id="miniTitle"> текст </h3>
</div>
<div class="rowInColumn">
<p class="p7"> текст </p>
</div>
<div class="rowInColumn">
<ul>
<li> <img class="mini1" src="/images/like.png"> текст </li>
<li><img class="mini1" src="/images/chat.png"> текст </li>
<li><img class="mini1" src="/images/spical.png"> текст </li>
<li><img class="mini1" src="/images/credit.png"> текст </li>
<li><img class="mini1" src="/images/chat.png"> текст </li>
</ul>
</div>
</div>
<div class="columCAR"> (это второй элемент с картинкой на против)
<div class="backgroundRow"> <img class="mini" src="/images/rigth.jpg"></div>
</div>
</div>
containerWithiTwoRow
иcolumnCAR
не по правилам css (должны были через точку)