0

Есть две колонки (в одной текст, в другой картинка) и они расположены в одну строчку на экране. На 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>

1
  • Я не являюсь веб-разработчиком но когда-то пытался и могу вставить свои 5 копеек. Вот тут очень хорошо объясняется адаптивная верстка. Так же, у вас css неправильно написан. Вы обращаетесь к классам containerWithiTwoRow и columnCAR не по правилам css (должны были через точку) 7 дек 2021 в 8:10

1 ответ 1

-1

У вас в CSS containerWithiTwoRow и columCAR вызываются не через точку

1
  • 1
    Ваш ответ можно улучшить с помощью дополнительной информации. Пожалуйста, нажмите править для добавления подробностей, например, цитат или документации, чтобы другие могли подтвердить правильность вашего ответа. Вы можете найти дополнительную информацию о том, как писать хорошие ответы в Справке. 7 дек 2021 в 8:16

Ваш ответ

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

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