Hi,
thanks for your question.
Yes, this should be possible by using a “CSS Media Query”. Please try this “Custom CSS”:
@media (max-width: 979px) {
.tablepress-id-123 .column-3,
.tablepress-id-123 .column-5,
.tablepress-id-123 .column-6 {
display: none;
}
}
This will hide columns 3, 5, and 6 of table 123 on devices with a width smaller than 980px (most likely tablets).
For phones, the same code can be used, with a recommended max-width value of 767px.
Regards,
Tobias
I added the code below to the custom css field and it worked on my mobile phone only showing 3 columns, but for my Samsung 7 inch tablet all twelve columns continued to show as well as overlap the right sidebar widget slightly. If I viewed on PC and resize screen it behaved correctly going from 12 columns to 6 then down to 3. Any suggestions why it wouldn’t display on the tablet? Also, is the practice of hiding (display:none) columns an acceptable practice with regard to what Google defines as deceptive practices?
@media (max-width: 979px) {
.tablepress-id-1 .column-4,
.tablepress-id-1 .column-6,
.tablepress-id-1 .column-8,
.tablepress-id-1 .column-9,
.tablepress-id-1 .column-10,
.tablepress-id-1 .column-11 {
display: none;
}
}
@media (max-width: 767px) {
.tablepress-id-1 .column-4,
.tablepress-id-1 .column-5,
.tablepress-id-1 .column-6,
.tablepress-id-1 .column-7,
.tablepress-id-1 .column-8,
.tablepress-id-1 .column-9,
.tablepress-id-1 .column-10,
.tablepress-id-1 .column-11,
.tablepress-id-1 .column-12 {
display: none;
}
}
Hi,
good to hear that this works on the phone and in the browser. However, I have no clue, why it doesn’t on the tablet…
Is the regular Responsive Tables Extension for tables working there? (It uses the same CSS technique.)?
Did the tablet maybe show a cached version? Can you maybe post a link to the page?
Regards,
Tobias
Actually I have not uploaded the Responsive Tables Extension, only read about it on your website. I will email you a link to the site as its under development and prefer not to publish the url, do you have a contact form? I did delete the cache on the website and tablet before attempting to view.
Hi,
ah ok. Yes, then please email me the link. My address is in the main plugin file “tablepress.php”.
Regards,
Tobias
You should include this in the faq or readme info!! This was VERY helpful!! Thank you!!!
Oh the only other thing is, it’s making a weird space on in the top header cells on my phone (not sure about iphone.. i’m using android)
the url is here/ if you want to see what it looks like.
Hi,
nice to hear that this is helpful to you as well! 🙂
On my phone (also Android) the header row looks fine, so I’m not sure what the problem is…
Regards,
Tobias
Hi, Tobias,
This isn’t working for me. I’m sure I’m doing something wrong.
But on homepage, http://www.omnivoreslibation.com
here’s my custom css:
@media (max-width: 979px) {
.tablepress-id-1 .column-2 {
display: none;
}
}
.dataTables_wrapper .tablepress .sorting div:after,
.dataTables_wrapper .tablepress .sorting_asc div:after,
.dataTables_wrapper .tablepress .sorting_desc div:after {
content: “”;
}
.dataTables_wrapper .tablepress .sorting,
.dataTables_wrapper .tablepress .sorting_asc,
.dataTables_wrapper .tablepress .sorting_desc {
padding-right: 8px;
}
.tablepress tbody td {
line-height: 1.25;
}
.tablepress thead th,
.tablepress tfoot th {
background-color: #d6d6d6;
line-height: 1.25;
}
.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
background-color: #c1c1c1;
}
.tablepress .column-1 {
padding: 0;
}
.dataTables_filter label {
font-size: 30px;
background-color: #2D9118;
color: #ffffff;
}
.dataTables_filter input {
height: 30px;
}
Hi,
thanks for your post, and sorry for the trouble.
What exactly is not working? When I reduce the width of the browser window, or use a small screen, the “Location” column is hidden just fine.
Regards,
Tobias
Interesting. My phone shows it. I cleared the cache and history too.
My browser does make it disappear if I make it smaller. But my iPhone shows it.
Fixed it by upping that to 1199.
Your support is always top-notch. What’s your paypal email?
Hi,
it might be possible that the iPhone uses a different view port, i.e. it might do some zooming so that the CSS media query is not evaluated.
It might be possible to change that with a HTML <meta> tag that changes the view port, like
<meta name="viewport" content="width=device-width,initial-scale=1">
(in the <head> section of the theme), but I’m no expert on that 🙁
Regards,
Tobias
Tobias, how do you change the size of the text WITHIN the search box? i.e. on my page the search box is very big but text is small.
Also, any way to make the box wider?
