Title: CSS Code for each screen device Last modified: October 15, 2019 --- # CSS Code for each screen device * Resolved [bibit](https://wordpress.org/support/users/bibit/) * (@bibit) * [6 years, 7 months ago](https://wordpress.org/support/topic/css-code-for-each-screen-device/) * Excuse me sir, I want to ask. I want to make every table have different font sizes on each screen. Do you think the css code that I created is correct ? This is my code look like : * ``` .tablepress thead th, .tablepress thead td, .tablepress tbody th, .tablepress tbody td, .tablepress tfoot th, .tablepress tfoot td { border: 2px solid #81D4FA; text-align: left; white-space: nowrap; padding-left: 3px; padding-top: 1px; padding-bottom: 1px; padding-right: 2px; background-color: white; font-size: 16px; font-family: Helvetica; color: #212121; } .tablepress thead th, .tablepress thead td, .tablepress tfoot th, .tablepress tfoot td { background-color: #81D4FA; height: 0; } .tablepress .column-1 thead th, .tablepress .column-1 thead td, .tablepress .column-1 tbody th, .tablepress .column-1 tbody td, .tablepress .column-1 tfoot th, .tablepress .column-1 tfoot td { width: 30%; word-break: keep-all; } .tablepress .column-2 thead th, .tablepress .column-2 thead td, .tablepress .column-2 tbody th, .tablepress .column-2 tbody td, .tablepress .column-2 tfoot th, .tablepress .column-2 tfoot td { width: 70%; word-break: keep-all; } @media (min-width: 970px) { .tablepress tbody th, .tablepress tbody td { font-size: 18px; } } @media (max-width: 970px) { .tablepress tbody th, .tablepress tbody td { font-size: 16px; } } @media (max-width: 640px) { .tablepress tbody th, .tablepress tbody td { font-size: 18px; } } @media (max-width: 720px) { .tablepress tbody th, .tablepress tbody td { font-size: 13px; } } @media (max-width: 720px) { .tablepress .row-8 .column-1, .tablepress .row-11 .column-1, .tablepress .row-18 .column-1, .tablepress .row-28 .column-1, .tablepress .row-33 .column-1, .tablepress .row-41 .column-1, .tablepress .row-48 .column-1, .tablepress .row-56 .column-1, .tablepress .row-62 .column-1, .tablepress .row-67 .column-1, .tablepress .row-122 .column-1, .tablepress .row-136 .column-1, .tablepress .row-143 .column-1, .tablepress .row-149 .column-1, .tablepress .row-155 .column-1 { font-size: 14px; background-color: #B3E5FC; font-weight: bold; } } @media (max-width: 720px) { .tablepress .row-68 .column-1, .tablepress .row-82 .column-1, .tablepress .row-95 .column-1, .tablepress .row-108 .column-1 { font-weight: bold; } } @media (max-width: 970px) { .tablepress .row-8 .column-1, .tablepress .row-11 .column-1, .tablepress .row-18 .column-1, .tablepress .row-28 .column-1, .tablepress .row-33 .column-1, .tablepress .row-41 .column-1, .tablepress .row-48 .column-1, .tablepress .row-56 .column-1, .tablepress .row-62 .column-1, .tablepress .row-67 .column-1, .tablepress .row-122 .column-1, .tablepress .row-136 .column-1, .tablepress .row-143 .column-1, .tablepress .row-149 .column-1, .tablepress .row-155 .column-1 { font-size: 16px; background-color: #B3E5FC; font-weight: bold; } } @media (max-width: 970px) { .tablepress .row-68 .column-1, .tablepress .row-82 .column-1, .tablepress .row-95 .column-1, .tablepress .row-108 .column-1 { font-weight: bold; } } @media (min-width: 970px) { .tablepress .row-8 .column-1, .tablepress .row-11 .column-1, .tablepress .row-18 .column-1, .tablepress .row-28 .column-1, .tablepress .row-33 .column-1, .tablepress .row-41 .column-1, .tablepress .row-48 .column-1, .tablepress .row-56 .column-1, .tablepress .row-62 .column-1, .tablepress .row-67 .column-1, .tablepress .row-122 .column-1, .tablepress .row-136 .column-1, .tablepress .row-143 .column-1, .tablepress .row-149 .column-1, .tablepress .row-155 .column-1 { font-size: 18px; background-color: #B3E5FC; font-weight: bold; } } @media (min-width: 970px) { .tablepress .row-68 .column-1, .tablepress .row-82 .column-1, .tablepress .row-95 .column-1, .tablepress .row-108 .column-1 { font-weight: bold; } } @media (max-width: 640px) { .tablepress .row-8 .column-1, .tablepress .row-11 .column-1, .tablepress .row-18 .column-1, .tablepress .row-28 .column-1, .tablepress .row-33 .column-1, .tablepress .row-41 .column-1, .tablepress .row-48 .column-1, .tablepress .row-56 .column-1, .tablepress .row-62 .column-1, .tablepress .row-67 .column-1, .tablepress .row-122 .column-1, .tablepress .row-136 .column-1, .tablepress .row-143 .column-1, .tablepress .row-149 .column-1, .tablepress .row-155 .column-1 { font-size: 10px; background-color: #B3E5FC; font-weight: bold; } } @media (max-width: 640px) { .tablepress .row-68 .column-1, .tablepress .row-82 .column-1, .tablepress .row-95 .column-1, .tablepress .row-108 .column-1 { font-weight: bold; } } ``` * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcss-code-for-each-screen-device%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 5 replies - 1 through 5 (of 5 total) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [6 years, 7 months ago](https://wordpress.org/support/topic/css-code-for-each-screen-device/#post-12031498) * Hi, * thanks for your post, and sorry for the trouble. * In general, this CSS looks correct. You will just have to keep in mind that “ the last command wins”. So, if multiple blocks apply (because of the screen size and selectors), the last set font size wins. You might then have to reorder the CSS blocks. * Regards, Tobias * Thread Starter [bibit](https://wordpress.org/support/users/bibit/) * (@bibit) * [6 years, 7 months ago](https://wordpress.org/support/topic/css-code-for-each-screen-device/#post-12035625) * The last command wins, so by this statement, the font size that i setup for each screen device, will readed all the same ? * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [6 years, 7 months ago](https://wordpress.org/support/topic/css-code-for-each-screen-device/#post-12036156) * Hi, * the CSS will be interpreted by the media query (with the screen width). Only those that apply to the current screen size are then used. * I recommend to investigate all this with the Developer Tools of your browser ( I recommend those from Google Chrome for this). Using the mobile emulator and the tools, you can see exactly which CSS is used for which screen size. * Regards, Tobias * Thread Starter [bibit](https://wordpress.org/support/users/bibit/) * (@bibit) * [6 years, 7 months ago](https://wordpress.org/support/topic/css-code-for-each-screen-device/#post-12037136) * OK, thank you so much Tobias. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [6 years, 7 months ago](https://wordpress.org/support/topic/css-code-for-each-screen-device/#post-12043925) * Hi, * sure, no problem! * Best wishes, Tobias Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘CSS Code for each screen device’ 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/) * 5 replies * 2 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [6 years, 7 months ago](https://wordpress.org/support/topic/css-code-for-each-screen-device/#post-12043925) * Status: resolved