Making div rows disappear in smallest mobile

Hi there everyone!

I’m in the process of implementing a responsive bootstrap template for a forum and am stuck on a particular issue.

If you look at this page: http://aircooledaddiction.com/forum/test.html

It formats very nicely on desktop and landscape mobile:

Desktop:

Landscape mobile:

Portrait mobile:

In the portrait mobile view, you can see that the block is too wide for the page and you have to scroll left and right to view all the content there. What I’d like to do is to hide the topics and posts rows when the viewport is too narrow to allow everything to be seen.

I’ve seen this type of thing done in other templates but I’m having a problem figuring out how to do it for myself.

Any help in the matter would be greatly appreciated!

If you apply the class “hidden-xs” to all of the table cells in those two columns, the two columns will be hidden.

Here is some documentation from the bootstrap website. http://getbootstrap.com/css/#responsive-utilities-classes

5 Likes

You can do it with css, just use the nth-child option to choose which columns to hide with display:none on the custom resolution that it gets too wide.

Thank you both very much for your help!

The problem was solved by using the class mentioned by Mark. It’s working fantastically!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.