Table width outside mobile border

Hi,

thanks for your question, and sorry for the trouble.

For me, this table does wrap the text over two lines, but of course this is only really possible in the “Director” column, as only that contains spaces between first and last name. The “Company” column is hidden automatically, by the “Custom CSS” that you are using.
Now, you could add word-wrapping right in between words, e.g. by adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-2 {
   word-break: break-word;
}

Regards,
Tobias

Thanks for your help, it was a ‘Director’ name that was too long causing the issue.
I’ve fixed that and reduced the font size to 13px, however it doesn’t change the font size of the dollar figures in the far right column.

Any idea on how I can make them 13px as well?

The code used in those columns as an example is:
<p style=”color:green”>↑$1,000</p>

And also, how can I make it so on desktop view it stays at 14px, but on mobile view the tablet is 13px?

13px works for mobile and solves the width issue, but is too small when viewing on a laptop.

Hi,

the font size in the last column is different because your theme sets a font size of 15px for <p> tags. (You might therefore want to use <span> tags in the future.)
We can however simply add those to the CSS:

@media (max-width: 360px) {
	.tablepress-id-2,
	.tablepress-id-2 p {
		font-size: 13px;
	}
}

Now, to assign different font sizes on different screen sizes, just extend that block of code to

.tablepress-id-2,
.tablepress-id-2 p {
		font-size: 15px;
}
}
@media (max-width: 980px) {
	.tablepress-id-2,
	.tablepress-id-2 p {
		font-size: 14px;
	}
}
@media (max-width: 760px) {
	.tablepress-id-2,
	.tablepress-id-2 p {
		font-size: 13px;
	}
}

Regards,
Tobias

Great thanks. The ‘span’ things work but it loses the green and red colour.
Any idea how I can keep those?
Is there a different code?

Also if you have a paypal or donation thing let me know.
Happy to send a few $ across for your help.

Ok, this I worked it out using:

<span style=”color:green”>↑$1,000</span>

Hi,

yes, you’d of course keep the style attribute ??

And thanks for wanting to donate, I really appreciate it! Please see https://tablepress.org/donate/ for more information.

Best wishes,
Tobias

Ok, I’ve worked it out. Thanks

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias