Есть ли в моем коде ошибки для отображения макета для экранов разных размеров? ⇐ CSS

[Anonymous]

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

/* Mobile First Approach */
@media only screen and (max-width: 600px) {
/* Adjustments for smaller screens */
.container {
flex-direction: column; /* Stack columns vertically */
align-items: center; /* Center align columns */
}

.left-column, .right-column {
width: 100%; /* Full width for columns */
margin: 0; /* Remove margins */
}

#siteimage {
width: 100%; /* Make the background image responsive */
}

.floatleft, .floatright {
width: 100%; /* Make floated elements full width */
margin: 0; /* Remove margins */
}
}

/* Larger screens */
@media only screen and (min-width: 601px) {
/* Your existing styles for larger screens */
}

Итак, я делюсь основными частями своего CSS, оставляя некоторые стили. элементы, которые не влияют на макет. На данный момент он отлично работает на компьютере, но не работает на мобильном устройстве. Левый столбец отображается нормально, правый столбец слишком широк, само поле отрезано от экрана мобильного устройства, а содержимое внутри него (которое находится в классе div внутри самого правого столбца) автоматически прокручивается, чтобы пользователь мог увидеть это, но, как вы можете себе представить, теперь его трудно просмотреть в 10% поля правого столбца.
Прежде чем какие-либо комментарии о том, насколько избыточен код, это был единственный способ для этого. работать так, как хотелось, поэтому боюсь что-то менять.

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

    .container {
display: inline-flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
box-sizing: border-box;
width: 100%;
}

.left-column {
flex: 1 1 auto;
box-sizing: border-box;
border: 2px solid #FDF9F8;
background-color: #9AABC1;
margin-bottom: 8px;
margin-top: 10px;
margin-right: 4px;
margin-left: 8px;
width: 254px;
height: 550px;
}

.right-column {
flex: 0 1 auto;
box-sizing: border-box;
padding: 12px;
background-color: #9AABC1;
color: #FDF9F8;
border: 2px solid #FDF9F8;
margin-bottom: 8px;
margin-top: 10px;
margin-right: 8px;
margin-left: 4px;
width: 90%;
height: 550px;
}

.scrolling-box {
overflow-y: auto;
overflow-x: auto;
height: 470px;
padding: 10px;
box-sizing: border-box;
}

Я пробовал менять ширину на проценты, а также пробовал добавить код @mobile вроде так, но это не дало никакого эффекта. Значительное изменение исходного кода портит макет на рабочем столе, добавление мобильного кода ничего не меняет. Я пробовал их по отдельности и вместе. Я также пытался сделать отдельную мобильную версию сайта с более простым кодом, но, увы, столкнулся с теми же проблемами, поэтому мне хотелось бы, чтобы его адаптировали под экраны, а не перенаправляли на совершенно новый формат макета.

Подробнее здесь: https://stackoverflow.com/questions/784 ... reen-sizes