CSS loaded but not takes effect on the display

Question

I always get stuck at CSS. I have a table, which works perfectly fine on large screens, and for mobile devices I want the table to be in a card format. I got an idea of creating another div and made the UI for mobile devices as well. And Using CSS, I tried...

resp.css

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


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

List.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>

Now, the CSS doesn't have any effect on the table, it displays both card and table. And the CSS is perfectly loaded.

Answer 1

Most of the people does this mistake and I think you have done too. Have you placed the viewport meta tag?

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

This code is required to get media query working. Again fix this code as below:

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

You have not put only before screen.

Hope this helps!