How do I responsively hide columns for a custom post type on edit.php?

Wider view, showing all the columns

I have a couple of custom post types that inject multiple columns into the edit.php screen. When the browser width is below about 1100 pixels, the columns get very squashed.

So I’ve added some CSS to remove four of the columns below that width. So far, so good. The problem is that the table doesn’t expand to fill the space. How can I ensure that table expands to use the full space?

If I hit refresh, the table will fill the space for a fraction of a second, before reverting to the squashed version.

For what it’s worth, my CSS is:

@media screen and (max-width: 1100px) {
    .wp-list-table #the-list tr .column-views, th#views { display: none}
    .wp-list-table #the-list tr .column-fb_reactions, th#fb_reactions { display: none}
    .wp-list-table #the-list tr .column-fb_shares, th#fb_shares { display: none}
    .wp-list-table #the-list tr .column-fb_comments, th#fb_comments { display: none}
}

(Tested in Chrome and Firefox.)

Read more here:: How do I responsively hide columns for a custom post type on edit.php?

Leave a Reply

Your email address will not be published. Required fields are marked *