awesome! is there an alternative code so it does this for all tables, not just the specific one?
Hi,
sure! To do this for all tables, just remove the “-id-1” part from the CSS selector, i.e. use
.tablepress img {
width: auto;
}
Regards,
Tobias
Tobias:
The images are now sized properly but when browser width is squeezed the images do not get smaller and the table isn’t responsive. Please advise, thanks!
– Roger
Hi,
is that Firefox again? Ok, one more try: Instead of what I suggested above, please try
.tablepress img {
width: 80%;
}
Regards,
Tobias
With your brains and my sense of humor we could take over the World!!!!
Thanks…working fine!
Hi,
haha 🙂 Great to hear that this did it!
Best wishes,
Tobias
Hi Tobias,
My table also won’t resize. Can you please help?
The site is http://immersionblenderreviewspot.com
Thanks.
sz
Hi,
thanks for your question!
Could you please clarify this? When I try, the images in your table resize just fine, so I don’t see any problem…
Regards,
Tobias
The table resizes fine in chrome for me, but not in firefox. Is it resizing for you correctly in firefox?
Hi,
ah, ok. Thanks for the clarification. You are right, in Firefox the images to not resize. Unfortunately, I don’t really see why? 🙁 I tried a few things (like those suggested above), but those didn’t help for some reason 🙁
Now, as most mobile phones/tables don’t use the FIrefox rendering engine, but the Chrome rendering engine, this should not be too problematic in practice.
Regards,
Tobias
Greetings Tobias! You have been quite responsive (no pun intended) on replying to this thread and I really like that about plugin authors. I have generally the same issue as everyone else but before I go randomly changing CSS with all of the examples above, I thought you could look at my site and see exactly what I need. Here is the page with the problem : http://familylawky.com/services/
Any help you could offer would the appreciated. Note, when the phone is turned horizontal, the table looks fine. When Vertical, it appears to run over the edge.
Thanks for you help!
Hi,
thanks for your post and sorry for the trouble.
The problem in your table is slightly different to the others, as you are not dealing with images here. In your case, the problem comes from the long words (or combination of words), like “Dependency/Neglect/Abuse”. As that does not contain hyphens or spaces (which are the letters where the browser can enforce word-wrapping, if necessary), these force the columns to have a large minimum width, so that they won’t fit into the available space, and thus create that overlapping.
Fixing the problem might therefore be as easy as adding spaces around the slashes (as you have done in the left column).
Additionally, you could reduce the spacing around the list bullets, to gain some space, by adding this “Custom CSS”:
.tablepress ul {
padding: 0;
margin: 0;
}
Regards,
Tobias
Hi again,
well, actually, I have to take that last part with the “Custom CSS” back. That table was not created with the TablePress plugin (for which these are the support forums), so that code will not work.
Instead, you could add something like
table ul {
padding: 0;
margin: 0;
}
to your theme’s CSS code.
Regards,
Tobias
Thanks for the quick reply, Tobias. Neither really made any difference.
I’m wondering if it is possible for the columns to be represented as rows when in the mobile vertical position?
