Hi all,
The flip and stack modes (but not the others!) can be further customized, by adding another parameter that defines for which screen sizes the mode should be used.
It´s right, that the “scroll” mode only enables horizontal scrolling.
But i have the same problem:
I want resize the width of the columns on mobile phones and tried it with media queries in the custom css (settings of table press), but that had no effect.
How and where can you adjust the size for mobile phones?
Hi,
thanks for your post, and sorry for the trouble.
Indeed, the shown Shortcode would only add horizontal scrolling to the table – which is too wide for the content area to fit. That’s essentially because the content in the cells (text, images, and white space around them, …) require space.
So, if you want the table to shrink, you will need to “sacrifice” something, essentially from these:
- You could tell the browser to make the images smaller.
- You could reduce the white space/padding in the cells (content will be closer together). (You actually have set that to a comparably big 20px in the TablePress “Custom CSS”.)
- You could instruct the browser to add word-wrapping (i.e. even short words will be hyphenated).
- You could reduce the font size of the text.
Regards,
Tobias
Hi Tobias,
`it all works!
But I would like the columns on mobile phones to be a little wider.
That’s why I set horizontal scrolling.
I tried this:
@media (max-width: 769px) {
.tablepress-id-8 tbody td {
font-family: Roboto;
font-size: 17px;
color: # 000000;
}
.tablepress-id-8 .column-1 {
width: 260px;
}
}
But the column width has not changed on my smartphone. What am I doing wrong?
Increasing the column width works for the desktop version.
Kind regards,
Nuray
Hi,
please try using
.tablepress-id-8 .column-1 {
width: 260px;
min-width: 260px;
}
for this.
Regards,
Tobias
Hi Tobias,
That’s it! Thanks a lot.
Kind regards,
Nuray
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Best wishes,
Tobias
P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!