On mobile device table words get cutoff on right side

Hi,

thanks for your post, and sorry for the trouble.

This is caused by how your theme works, and how it sets paddings and margins for the post content area. Due to that, the table is cut off.
One quick way to fix this, could be this “Custom CSS” on the “Plugin Options” screen of TablePress:

#content_container .tablepress {
	margin: 0px 20px;
	width: 96%;
}

Regards,
Tobias

Tobias,

That code centered all my tables if viewed on a desktop. But its still cutting off the second column on a mobile screen and the horizontal scroll will isn’t working. Maybe it has to do with the formatting of my table since it was imported as an HTML table from word.

Nevermind. I removed the merged title row so its now split in two. I have full horizontal movement now. Thanks for your help on making my tables look better.

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!

I hate to tag on to this thread, but I’m having a similar issue with two tables when viewing on a mobile device. The desktop view is perfect, just mobile device view that is not working correctly. The odd thing is that the table on my other page is perfect. Thank-you so much for your help!

This tables look good on desktop and mobile device:
https://www.lisawbuckdesign.com/?page_id=107

These two are messed up – perhaps to do with the graphics?
https://www.lisawbuckdesign.com/?page_id=98
https://www.lisawbuckdesign.com/?page_id=345

Hi,

your best bet probably is to set column widths on these tables, like

.tablepress-id-1 td {
  width: 50%;
}

and then tell the browser to shrink the images on small screens:`

.tablepress-id-1 img {
  max-width: 100%;
}

Regards,
Tobias

Sorry for posting in two places – I wasn’t sure if this thread was still alive. Thanks so much for your help! That worked- the only issue is that I have graphics in one side and text in the other so when it adjust on the mobile, there is a big space between the first and second image, as the text in the right side makes the row much longer. Is it possible to fix that in any way? Thanks so much for your help!

Hi,

unfortunately, I can’t really think of a better way here. :-/ This simply is the drawback of using a table for this, I’d say. See, tables on the web are not really a good tool for layout/design purposes (like showing content in columns). They should be used for displaying actual tabular data only.
So, in your case, it might be better to directly embed the images into the text and then let some CSS code handle how they float.

Regards,
Tobias

Ok, thanks so much!

Hi,

no problem, you are very welcome! ??

Best wishes,
Tobias