Итак, всем снова здравствуйте, все еще воюю с адаптивом. И, к сожалению, снова вынужден спросить совета (а так хотелось понять самому). В общем, есть флекс-контейнер, слева фото, справа заголовок и текст, при уменьшении разрешения экрана заголовок и текст сползают вниз (flex-wrap:wrap), а фото остается сверху. Так вот, как сделать так, чтобы фото отображалось корректно на всю ширину блока? Пытался сделать с помощью min-width - не помогло, если сделать фикс. ширину - при еще более узком экране картинка выглядит ужасно и ломает верстку. Магистры, нужна ваша сила.
.container {
max-width: 100%;
max-width: 1170px;
margin: 0 auto;
text-align: center;
}
.menu__item {
display: flex;
align-items: center;
width: 100%;
border: 2px solid rgb(0, 0, 0);
}
/* --------------------------------------------------- */
.menu__content {
text-align: center;
margin: 0 100px;
}
/* --------------------------------------------------- */
.menu__wrapper {
max-width: 50%;
margin: 0;
padding: 0;
}
.menu__img {
display: block;
width: 100%;
object-fit: cover;
margin: 0;
padding: 0;
}
@media (max-width:991px){
.container {
max-width: 750px;
}
.menu__item {
flex-wrap: wrap;
}
.menu__wrapper {
width: 100%;
}
.menu__content {
width: 100%;
}
.menu__img {
min-width: 100%;
}
<section class="section">
<div class="container">
<div class="section__header">
<h3 class="section__title">Меню</h3>
<p class="section__text">КОФЕ, ЗАВТРАКИ, ВЫПЕЧКА</p>
</div>
<div class="menu">
<div class="menu__item">
<div class="menu__wrapper">
<img class="menu__img" src="https://picsum.photos/2500/4200" >
</div>
<div class="menu__content">
<h3 class="menu__title">Отличный кофе</h3>
<p class="menu__text">Наши бариста приготовят для Вас крипкий и ароматный кофе, чтобы проснуться утром. Или нежный и сладкий для поддержания энергии во время рабочего дня</p>
</div>
</div>
<div class="menu__item">
<div class="menu__content">
<h3 class="menu__title">Вкуснейшие завтраки</h3>
<p class="menu__text">Пока бариста будут варить для вас отменный кофе, закажите наши завтраки которые не оставят вас равнадушными на весь день!</p>
</div>
<div class="menu__wrapper">
<img class="menu__img" src="https://picsum.photos/3600/4500" >
</div>
</div>
<div class="menu__item">
<div class="menu__wrapper">
<img class="menu__img" src="https://picsum.photos/1800/2500" >
</div>
<div class="menu__content">
<h3 class="menu__title">Свежайшая вепечка</h3>
<p class="menu__text">Возьмите с собой или к кофе нашу свежую выпечку. Лучший вариант чтобы сделать перекус во время работы или перерыва!</p>
</div>
</div>
</div>
</div>
</section>
P.S - правда пытался разобраться сам, ведь так лучше усваивается, ведь я учусь. Поэтому, если не сложно, прошу ответить хотя бы с минимальным объяснением, что я делаю не так и почему, спасибо!