@mindx

Как сверстать этот блок?

Учусь на бесплатном макете, и впал в ступор...
Нужно сверстать адаптивно этот блок:m4i-snMU40c.jpg
Чтобы сделать разные bg у каждого блока, я добавил классы feedback-block-left/right, дальше сделал блок с постом и картинкой inline , но картинка никак не хочет расширяться по высоте и ширине блока...
https://codepen.io/Mindx/pen/oqgRQB
Что делаю не так? Чем дальше тем больше запутываюсь....
  • Вопрос задан
  • 119 просмотров
Решения вопроса 1
@tyzberd
display: flex для блоков с шириной 50% и минимальной высотой.
Внутри одного текст, в другом картинка через img или background. Если картинка object-fit: cover;, если фон background-size: cover;
Для моб через media меняем когда нужно ширину блоков на 100% и можно еще порядок поменять с помощью order, что бы была сначала картинка потом текст.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
vetero4eg
@vetero4eg
Frontend
Возможно не лучшее решение, но я бы делала так:
веделила два блока, верхняя строка / нижняя строка. У верхнего блока бэкграунд черный с картинкой по url, спозиционированной вправо, занимающая 50% блока, внутри блока контейнер с контентом, там уже по сетке как делаете, так и располагайте. У нижнего то же самое, только фон белый, картинку позиционируете влево, также внутри контейнер с контентом уже по сетке.

если что-то будет не получаться, картинки можно отдельным абсолютами повесить, с позиционированием относительно строки top: 0, bottom: 0, right: 0, left: 50% для верхнего блока, и то же самое для нижнего, только left и right наоборот.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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