'In mobile responsive pagination is disappearing

Below is my code and here pagination is displayeing in laptop view as well as ipad or tablet view but while i am going to a small screen like mobile responsive view the pagination is completely disappearing So any one please tell where I am going wrong. In every devices pagination is appearing and working fine but in mobile device it is not appearing

html

<head>
    <script src="https://pagination.js.org/dist/2.1.4/pagination.min.js"></script>
</head>


<div class="container">
<table class="table table-striped table-class mytable" id="inbox">
<thead>
<tr class="msglist_header">
<th class="fix_member">Member</th>
<th id="msg_product" class="pro">Product</th>
<th id="msg_msg" class="nm">Message</th>
<th id="msg_date">Date</th>
<th id="msg_Actione">Action</th>
</tr>
</thead>
<tbody id="inbox-1">
{% if msg_list %}
{% for i in msg_list %}
<tr class="content_set">
<!--     tableList = rim_classifieds_messages.objects.all().order_by('-id')-->
<td id="texto">
<div>
<a class="fix"href="{% url 'mail_show' i.id %}">{{i.username|first|upper}}
<span>{{i.username|last|upper}}</span></a></div>
</td>
<td>
<a href="{% url 'mail_show' i.id %}">
<div class="show-form-msgrply a">
{{i.ttle}}
</div>
</a>
</td>
<td>
<a href="{% url 'mail_show' i.id %}">
<div id="classi_msg" class="c classi_msg">{{i.message}}</div>
</a>
</td>

<td style="width:90px;">
<div class="f">
{% for key,value in some_date.items %}
{% if i.id == key %}
<a href="{% url 'mail_show' i.id %}">
{{ value }}
</a>
{% endif %}
{% endfor %}
</div>
</td>
<td style="width:70px;">
<button class="show-form-msg-delete">
<a href="{% url 'msg_delete' i.id %}">
<span class="fa fa-trash"></span>
</a>
</button>
</td>
</tr>
{% endfor %}
{% endif %}

</tbody>
</table>

<!--        Start Pagination -->

</div> 
<div id="pagination-1">

</div><!--      End of Container -->

css

#pagination-1 {
      width: 100%;
      text-align: center;
      position: absolute;
      left: -117px;
    }

    #pagination-1 ul li {
      display: inline;
      margin-left: 10px;
    }
    #pagination-2 {
      width: 100%;
      text-align: center;
    }

    #pagination-2 ul li {
      display: inline;
      margin-left: 10px;
    }

    #pagination-3 {
      width: 100%;
      text-align: center;
    }

    #pagination-3 ul li {
      display: inline;
      margin-left: 10px;
    }
    .paginationjs-prev {
            border: 1px solid lightgray;
            border-radius: 50%;
            padding: 4px 8px 8px 8px;
    }
    .paginationjs-next {
            border: 1px solid lightgray;
            border-radius: 50%;
            padding: 4px 8px 8px 8px;
     }   
@media screen and (min-width:320px)and (max-width:767px) {
#pagination-1 {
    left: -34%;
    width: 172px;
    top: 388px;
    font-size: 14px;
}
}
htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions