Title: CSS @Media Usage
Last modified: August 20, 2016

---

# CSS @Media Usage

 *  Resolved [Neil Haslewood](https://wordpress.org/support/users/neil-haslewood/)
 * (@neil-haslewood)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/css-media-usage/)
 * Hi Tobias
 * Is it possible to have different [@media](https://wordpress.org/support/users/media/)
   codings for different tables?
 * At the moment I have the following in Custom CSS which works great for all tables).
   However I now have a few tables which I want with different columns hidden …
 * [@media](https://wordpress.org/support/users/media/) only screen and (max-width:
   768px) {
    .column-5 {display:none;visability:hidden;} .column-6 {display:none;
   visability:hidden;} .column-7 {display:none;visability:hidden;} .column-8 {display:
   none;visability:hidden;} .column-9 {display:none;visability:hidden;} } [@media](https://wordpress.org/support/users/media/)
   only screen and (max-width:420px){ .column-4 {display:none;visability:hidden;}.
   column-5 {display:none;visability:hidden;} .column-6 {display:none;visability:
   hidden;} .column-7 {display:none;visability:hidden;} .column-8 {display:none;
   visability:hidden;} .column-9 {display:none;visability:hidden;} } [@media](https://wordpress.org/support/users/media/)
   only screen and (max-width:320px){ .column-3 {display:none;visability:hidden;}.
   column-4 {display:none;visability:hidden;} .column-5 {display:none;visability:
   hidden;} .column-6 {display:none;visability:hidden;} .column-7 {display:none;
   visability:hidden;} .column-8 {display:none;visability:hidden;} .column-9 {display:
   none;visability:hidden;} }
 * Thank you.
 * Neil
 * [http://wordpress.org/extend/plugins/tablepress/](http://wordpress.org/extend/plugins/tablepress/)

Viewing 1 replies (of 1 total)

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/css-media-usage/#post-3248744)
 * Hi,
 * thanks for your question.
 * Yes, that’s no problem! You’ll just have to prepend your “Custom CSS” with the
   CSS class of the table.
    For example, your first [@media](https://wordpress.org/support/users/media/)
   query could be
 *     ```
       @media only screen and (max-width:768px) {
       .tablepress-id-1 .column-5,
       .tablepress-id-1 .column-6,
       .tablepress-id-1 .column-7 {
         display:none;
         visibility:hidden;
       }
       .tablepress-id-2 .column-3,
       .tablepress-id-2 .column-4,
       .tablepress-id-2 .column-5 {
         display:none;
         visibility:hidden;
       }
       }
       ```
   
 * That way, in table ID 1, columns 5-7 would be hidden, and for table ID 2, column
   3-5 would be hidden.
    Also note that I slightly rearranged and optimized the 
   structure of the code, to have less duplication. Also, you had typo in “visability”,
   which has to be “visibility”. (I actually think that the `display: none;` is 
   enough, and that the `visibility` property can be left out.)
 * Regards,
    Tobias

Viewing 1 replies (of 1 total)

The topic ‘CSS @Media Usage’ is closed to new replies.

 * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944)
 * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tablepress/)
 * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/)

## Tags

 * [media](https://wordpress.org/support/topic-tag/media/)

 * 1 reply
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [13 years, 6 months ago](https://wordpress.org/support/topic/css-media-usage/#post-3248744)
 * Status: resolved