сделать две колонки отзывчивыми в html

Question

Простой, наверное. Я сделал веб-страницу и теперь мне нужно, чтобы она реагировала на мобильный телефон с разрешением 375 пикселей;

В html я добавил:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Мои два столбца названы в html следующим образом:

#columnleft {
  float: left;
  width: 50%;
  text-align: center;
  background-color: #E8F8F5;
}

#columnright {
  float: right;
  width: 50%;
  text-align: center;
  background-color: #F4ECF7;
}

<div id="columnleft"> ..... </div>
<div id="columnright"> ..... </div>

Я знаю, что мне нужно сделать медиа-запрос, подобный этому

   @media screen and (max-width: 375 px)

Но ничего не работает. Самый большой размер - 1024 px, только эти два размера имеют значение для этого проекта. Ничего промежуточного. Мне нужно, чтобы два столбца располагались друг на друге, а не бок о бок

Любой совет, высоко ценимый, спасибо

Answer 1

составляют их ширину 100%

@media only screen and (max-width: 357px) {
  #columnleft, #columnright {
    width: 100%;
  }
}