Responsive design and fonts

Hi,

thanks for your post, and sorry for the trouble.

I’m not really sure what you mean with “the texts are FIX”. Do you want the texts to get smaller (in font size) as well? That’s not really a good idea, as they will not be readable.

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Hi Tobias and thanks, I mean when minimize the browser, those tables which has a lot of text and columns doesn’t responsive, because the text size is fixed, is there any code for making the text responsive like picture? I mean when the table become smaller by user screen, the texts size become smaller automatically, could I understanding you? sorry for my bad english,

Many thanks,

Hi,

making text in tables responsive is very tricky. You could reduce the font size, but I don’t recommend that, because nobody will be able to read anything.

Instead, it’s probably better to offer Horizontal Scrolling, e.g. with this approach: https://www.ads-software.com/support/topic/responsive-tables-scroll-only?replies=6#post-5511954

Regards,
Tobias

Hi Tobias, I’m sorry for my simple questions, but I’m really new in wordpress,

I paste

<div class="tablepress-scroll-wrapper">
[table id=1 /]
</div>

in my tables page (text section not visual) , and also paste

.tablepress-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}

to the plugin options,custom css. but nothing happened with table id with number 1,
and also I want to add tables to the sidebar, one time I did it, but the table pixels goes out of the website width,
I’m sorry, because I can’t understand many things in FAQ or what is div i.e,
can you help me please for solve this problems,
Many thanks Tobias,

Hi,

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Yes, sure my friend, and after loading, make your browser wide smaller, scroll down and take a look at all tables, those tables in middle of the page which has a 3 columns automatically become smaller with browser screen size, but the first tables are fixed, because they have more columns, I think so,

Many thanks,

Hi,

thanks for the link! The very top table in the center is having the scroll function, and that’s what is helpful on small screens. So, the approach from above is working fine, as far as I can see.

This is pretty much all that you can do here, as the table’s content simply requires the current table width. The browser can not reduce the content width (e.g. by inserting more line breaks) any further. This simply is the result of the tabular layout, which is a fixed structure.

The only other option here would be to reduce the font size, but that would be very useless, as nobody can then read the text in the tables anymore.

Regards,
Tobias