Table responsiveness on mobile screen width

Posted in: Newspaper
Post count: 13
agarg94
#274258
Jan 30, 2019 at 9:31 am

Hi,
We have a blog
https://www.blog.centilytics.com/containers-vs-vms-virtual-machines/
And in this blog, we have a table.

Now, as we go an reducing the screen size, the responsiveness of the table seems to work. But as it reach below 430px, the table does not shrinks down anymore according to the width. It just stays there. And a person accessing the blog on mobile cannot see the whole table as there is no overflow enabled (CSS) on the table.
Hence, the table is not properly accessible in mobile view.
How can we sort this ?

Post count: 23312
Catalin
#274321
Jan 30, 2019 at 1:28 pm

Hi,

You should customize your HTML table content to be fully responsive as you wish. Notice that our theme does not make this thing, sorry! Try to create your own custom CSS code using the Inspector browser from here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks.

Post count: 1341
Edward
#274330
Jan 30, 2019 at 1:51 pm

2@agarg94:

Try to add this CSS-code in “Custom CSS” section of the Theme:

/* Responsive tables */
.table-responsive {
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

And to add your table in article like this:

<div class="table-responsive">
Insert code of your table here...
</div>

Viewing 3 posts - 1 through 3 (of 3 total)
The forum ‘Newspaper’ is closed to new topics and replies.