Необходимо разместить иконки рядом с текстом. (Мобильная адаптация)

Question

нужна помощь в адаптации, есть 2 блока текста и 2 иконки. Я хочу чтобы они располагались слева от текста.

Answer 1

Делайте это при помощи display: flex или display: grid

Запомните хорошую вещь, когда верстаете - если нужно два элемента поставить друг напротив друга нужно использовать flex или grid. Если с одной стороны должен располагаться один элемент, а со второй 2 и более, тогда эти два и более элементов нужно обернуть в один элемент, что бы в итоге получилось всего два элемента на одном уровне вложенности, чтобы поставить их напротив друг друга.

.block {
  max-width: 300px;
  display: grid;
  grid-template-columns: 50px auto;
  gap: 15px;
  border: 1px solid black;
  padding: 5px;
}

.img-wrapper {
  display: block;
  width: 50px;
  height: 50px;
  background-color: green;
}

h3 {
margin-top: 0;
  margin-bottom: 10px;
}

p {
  margin: 0 0 10px;
}

<div class="block">
  <div class="img-wrapper"><img src="test.jpg" alt="img" width="50" height="50"></div>
  <div class="content">
    <h3>Title</h3>
    <p>Content description</p>
  </div>
</div>

БЛОГ НА HUSL

Необходимо разместить иконки рядом с текстом. (Мобильная адаптация)

Ответы (1 шт):