Reponsive issue

Hi,

thanks for your post, and sorry for the trouble.

From what I can see, this seems to be caused by two things:
For the first two rows, you have set a border of none, while the other rows have a 3px colored border. You should therefore also set a 3px colored border (where the border color is the same as the background color on the first two rows).
Additionally, you seem to have restricted the widths of the cells to 50px. This unfortunately will not work for the first row, once it is flipped. You should therefore not restrict the width of the first row.

Could you please try that?

Regards,
Tobias

Apologies – I didn’t realise that you had replied.

The example I’ve given you is a bad example as I’m trying to combine the top two rows in those tables.

Could you look at https://dontforgetthebubbles.com/genetic-syndromes/ as a better example of the mobile issue? The table runs over the edge and is unviewable in the mobile version…

Thanks

Hi Tessa,

the table on https://dontforgetthebubbles.com/genetic-syndromes/ does not have the Responsive Tables Extension enabled (it doesn’t seem to use the Shortcode parameter), so it is kind of expected that the table runs over the edge on small screens, as the content has to go somewhere, after all.

I therefore suggest to try the Responsive Tables Extension again, e.g. with

[table id=1 responsive=tablet /]

, and to make it work also add/change this “Custom CSS”:
The first block should be extended to

.tablepress thead th,
.tablepress tfoot th {
	background-color: #00c8bd !important;
	border: 3px solid #00c8bd!important;
}

Then, please also add

@media (max-width: 979px) {
  .tablepress-id-1 .column-5 {
    height: 165px;
    width: auto !important;
  }
}

Regards,
Tobias

Thanks – I think I have now added all of this, but it still does not work correctly…

Hi Tessa,

it seems that you have not adjusted the Shortcode yet? It does not seem to have the

responsive=tablet

parameter.

Regards,
Tobias

Perhaps I am putting it in the wrong place.

In the page where I add the table shortcode I have:

[table id=1 responsive=tablet /]

Hi,

ok, now the Shortcode is correct, and the function is active. If you reduce the width of your browser window (or try on a table), you will see the responsive behavior.

However, that’s not really helpful here, I guess, as on small screens the sidebar on the left still takes a lot of space and only gives very little space to the table. Due to that, the table still won’t look good ??
The only fix here that I see, would be to make the theme more responsive in general, for example with moving or hiding the sidebar on small screens. The Responsive Tables Extension alone will not help here ??

Regards,
Tobias