Hi,
thanks for your question.
Tables on phones are in general tricky, due to the limited amount of space. You might therefore want to check out a responsive approach. For TablePress, you could try this Extension: http://tablepress.org/extensions/responsive-tables/
Regards,
Tobias
HI Tobias,
I am having an issue with responsive images, basically they are shrinking so small on the phone that they are just dots.
Can I make changes to the @media call to fix this?
When viewed on a mobile via ‘view full site’ the icons are presented correctly
but
When viewed in ‘Mobile site’ mode the images are pin sized
I am using Headway theme framework
· Website: http://myworkmate.com.au/about-my-workmate/
· TablePress: 0.9-RC
· TablePress (DB): 17
· TablePress table scheme: 3
· Plugin installed: 2013/02/27 09:58:52
· WordPress: 3.5.1
· Multisite: yes
· PHP: 5.2.17
· mySQL (Server): 5.0.96-community
· mySQL (Client): 5.0.96
· ZIP support: yes
· UTF-8 conversion: yes
· WP Memory Limit: 64M
· Server Memory Limit: 256M
· Magic Quotes: on
· WP_DEBUG: false
Hi,
thanks for your post, and sorry for the trouble.
This is actually not caused by TablePress (or the Responsive Tables Extension, which you are not actually using for that table), but by the theme’s CSS. That’s telling the browser to shrink the images on mobile devices. The browser will then however give a higher priority to the text, so that the images shrink to a minimal width.
To change that in tables, please try adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
.tablepress img {
max-width: none !important;
}
Regards,
Tobias
Hi Tobias, thanks for the reply on this issue
That css stops the image from shrinking at all so it does not address the responsive issue.
You said
the Responsive Tables Extension, which you are not actually using for that table
I added the [table id=123 responsive="all" /] and I only have the first row showing on all devices, I went through ‘phone’, ‘mobile’ ‘desktop’ but each setting has restrictions on other devices. and the images size on all of them is not responsive.
Hi,
@corpcasting: Sure, no problem, you are very welcome!
@frank: The Responsive Tables Extension is not really useful for your kind of table. It’s more targeted at tables that have a header row and show rows that are like “entries” of data. For your table, which serves visual purposes, this approach does not work (and it does not influence images). You should therefore not use the Responsive Tables Extension for this table.
And you are right, my suggested CSS will give those images that same fixed width on all devices. If that’s not what you want, you could set a minimum width on the images, so that they don’t shrink to dots. So, please remove the CSS I suggested and instead add
.tablepress-id-2 img {
min-width: 20%;
}
Regards,
Tobias
Thanks again for you quick reply Tobias,
This is causing issues with the placement ie, text on the right over lapping the image in full size and not making any difference to the image size.
I tried all different % but no change
Hi,
ok, one more idea: Instead of setting a minimum percentage width on the images, we can try to set a minimum absolute width on the first column. Please try again with
.tablepress-id-2 .column-1 {
min-width: 50px;
}
Regards,
Tobias
Thank you Tobias
That makes it work, much appreciated, I am on my way to donate for not only the great product but the superb support.
Thanks again and all the best
Hi Frank,
very nice! Great to hear that his helped! 🙂
And thanks for wanting to donate, I really appreciate it!
Best wishes,
Tobias
P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!
Hey Tobias,
I’m not sure this is functioning properly. It took the table and made it horizontal. It’s nearly impossible to navigate on mobile. When I had “responsive=all”, the same thing happened on desktop, even though there was plenty of room. I changed it back to just “responsive=phone” so you could check it out. Link – http://30a.com/where-can-i-get-the-30a-card/
Thanks.
Hi,
I just checked your site on my phone, and everything is working as intended, from a technical point of view. However, I agree that this solution is not really helpful for your site/table. The theme leaves (comparably) big margins around the table, and due to the width/length of the table head cells, the remaining place for the body cells is rather small (only like half the width of the screen). Scrolling itself is working fine there, but the benefit is doubtful. Thus, this solution might not be the best solution for a responsive layout on phones – for this table.
Unfortunately, I don’t have further ideas to achieve a responsive table here 🙁 Sorry.
Regards,
Tobias
Tobias,
No problem. I appreciate the response.
Thanks!
Hi,
my pleasure! I hope that the plugin is still useful!
Best wishes,
Tobias
Most definitely!! One of the best plugins I’ve ever used. 🙂
