Изменение свойства отображения с медиа-запросом не работает

Question

Я использовал следующий код CSS, и он работал нормально:

@media screen and (min-width:800px)
{
  .column {
        width:30%;
        display: inline-block;
        float: left;
        margin-left: 2%;
   }   
}

Но когда я использую следующий код CSS, свойство display не изменилось, почему?

.column {
        width:30%;
        display: inline-block;
        float: left;
        margin-left: 2%;
}

@media screen and (max-width:800px)
{
.column
    {
       display:block;
       background-color:turquoise;
       font-size:2em;
    }
}

Answer 1

Код, который вы написали, прекрасен. Свойство отображения меняет свое значение. Причина, по которой изменение не является очевидным, заключается в том, что ширина по-прежнему составляет «30%» даже после преобразования в элемент «блок».

Либо назначьте ему новую ширину, например «100%», которая по умолчанию для « block "или другое значение.

Answer 2

Вроде не потому, что у тебя width:30%;. Измените свой код на

@media screen and (max-width: 800px) {
    .column {
       width: 100%;
       display:block;
       background-color:turquoise;
       font-size:2em;
    }
}

Answer 3

Свойство отображения было изменено с встроенного блока на блок, но поскольку ширина была 30%, а свойство float было установлено влево , изменение не было видно. Когда float был удален, блоки div располагались в отдельных строках, что характеризовало c блочных элементов.