Адаптивный код работает неправильно. Он не отображает элементы так, как должно быть в контейнере 1fr в сетке. ⇐ Html

[Anonymous]

По какой-то причине следующий адаптивный код не работает должным образом. Все выглядит нормально при отображении шириной более 800 пикселей, но когда ширина ниже 800 пикселей, все элементы отображаются сложенными друг на друга в области сетки: content_display, как показано на прикрепленном изображении. Нужно ли включать дополнительную информацию в @media для каждого элемента: image_box, text_box, info_box? Размер изображения составляет 340 пикселей в ширину и 213 пикселей в высоту с разрешением 72 точки на дюйм. Есть предложения о том, что нужно изменить?

Код: Выделить всё

Responsive Grid Layout


body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}

.grid_container {
position: relative;
top: 100px;
display: grid;
grid-template-areas: "side_menu content_display";
grid-template-columns: 2fr 10fr;
gap: 16px;
padding: 16px;
}

.side_menu {
grid-area: side_menu;
}

.side_menu_heading {
font-size: 18px;
color: black;
text-align: left;
font-family: 'Playfair Display', serif;
}

.content_display {
grid-area: content_display;
max-width: 900px;
max-height: 250px;
border: 1px dotted black;
text-decoration: none;
display: flex;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content_display:hover {
transform: scale(1.05);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
}

.image_box {
flex: 2;
border: 1px solid black;
padding: 4px;
max-height: 220px;
box-sizing: border-box;
}

.image_box img {
width: 100%;
height: auto;
}

.text_box {
flex: 4;
max-height: 220px;
padding: 4px;
box-sizing: border-box;
font-size: 14px;
color: black;
text-align: left;
font-family: 'Playfair Display', serif;
}

.info_box {
flex: 2;
border: 1px dotted black;
background: #D7D8DA;
padding: 4px;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
display: flex;
flex-direction: column;
justify-content: space-around;
}

.info_item {
display: flex;
align-items: center;
font-size: 12px;
color: black;
}

.info_item i {
font-size: 16px;
margin-right: 6px;
}

.info_item .bold {
font-weight: bold;
}

@media (max-width: 800px) {
.grid_container {
grid-template-areas:
"side_menu"
"content_display";
grid-template-columns: 1fr;
}

.content_display {
flex-direction: column;
}

}








Section Heading


[url=#]

[img]images/hot_air_balloon4.png[/img]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Quisque blandit eros at magna ullamcorper.


[/i]
02-31 May

[i][/i]
10:00 AM – 2:00 PM

[i][/i]
The Arts Center


[/url]

Подробнее здесь: https://stackoverflow.com/questions/796 ... ements-lik