CSS @Media Usage

  • Resolved Neil Haslewood

    (@neil-haslewood)


    13 years, 6 months ago

    Hi Tobias

    Is it possible to have different @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 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 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 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/

Viewing 1 replies (of 1 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    13 years, 6 months ago

    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 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.

Tags