CSS загружено, но не действует на дисплее

Question

Я всегда застреваю на CSS. У меня есть таблица, которая отлично работает на больших экранах, и для мобильных устройств я хочу, чтобы таблица была в формате карты. У меня появилась идея создать еще один div и создать интерфейс для мобильных устройств. И используя CSS, я пытался ...

соответственно css

.immobile{
  display: none;
}
.immonitor{
  display: block;
 }


@media screen and (max-width: 764px){
.immonitor{
    display: none;
}
.immobile{
    display: block;
  }
}

Список. html

<tbody>
                            {% for order in order_list %}

                        <div class="immonitor">
                            <tr>
                                <td>{{ order.id }}</td>
                                <td>{{order.client_name}}</td>
                                <td>{{order.event_name}}</td>
                                <td>{{order.event_date}}</td>
                                <td>{{order.location}}</td>
                                <td><a href="{% url 'order_detail' order.id %}">View</a></td>
                            </tr>
                        </div>
                            <div class="immobile">
                                <tr>
                                    <td>
                                        <div>
                                            {{order.client_name}} <br>
                                            <h3>{{ order.id }}</h3>
                                        </div>
                                        <div class="pull-right">
                                            {{order.event_name}}<br>
                                            {{order.event_date}}<br>
                                            {{order.location}}<br>
                                        </div>
                                    </td>
                                </tr>
                            </div>

                            {% endfor %}
                        </tbody>

Теперь CSS не оказывает никакого влияния на стол, он отображает как карту, так и стол. И CSS отлично загружен.

Answer 1

Большинство людей делают эту ошибку, и я думаю, что вы тоже сделали. Вы разместили метатег viewport?

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

Этот код необходим для работы медиазапроса. Снова исправьте этот код, как показано ниже:

@media only screen and (max-width: 764px){
.immonitor{
    display: none;
}

Вы не поставили only перед экраном.

Надеюсь, это поможет!