Support » Plugin: TablePress » CSS Code for each screen device

  • Resolved bibit

    (@bibit)


    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 to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    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

    bibit

    (@bibit)

    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 TobiasBg

    (@tobiasbg)

    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

    bibit

    (@bibit)

    OK, thank you so much Tobias.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    sure, no problem!

    Best wishes,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.