Responsive issue on iphone

Hi,

thanks for your question, and sorry for the trouble.

The problem here is basically that not all cells in a column have the same height right now (because you only added text to one of them). To fix that, you could force the same height on all cells in the responsive mode, e.g. by adding this to the “Custom CSS” on the “Plugin Options” screen of TablePress:

@media (max-width: 767px) {
  .tablepress-id-3 tbody td {
    height: 190px;
  }
}

Regards,
Tobias

Hi,
I put the CSS code, but its still doesn’t work…
I’m using a child theme (with style.css)

I deleted the text to test the responsive design with your Css code but i have the same problem.
I would like to have ONE (or TWO maximum) column in the Iphone View.

Thanks in advance.

Hi,

from what I can see, the code does actually work, but from your description, it sounds as if the Responsive Tables Extension is not something that will help you here then.
The Extension will not simply show just one or two columns. Instead, it will flip the table and make it scrollable. And as you have three rows, that will mean that the table will have three columns with the Extension.
Thus, for what you would like to have, the Extension is not the right tool ?? Sorry.

Depending on what data your table contains, it might even be possible that a table is not the right tool (because it’s very hard to make a table responsive). Instead, you might want to check for other ways, e.g. with custom HTML <div> elements. You can let those “float”, so that the page will always only show so many <div>s fit on the screen.

Regards,
Tobias

Hi Tobias,

I tried to make another table wwith less columns and rows.

But it doesn’t work on IPhone too, could you check on: https://www.wazzabitest.fr/le-candidat-christophe-lubac/

I have another issue on this table.
As youn can see on the desktop view, it miss a border on the top of the table.
Hox can i fix it?

thanks in advance

Hi,

I don’t see any TablePress tables on this page. Can you please guide me on how to find the table? Thanks!

Regards,
Tobias

Ok Now you can see it at the end of the page.

Many thanks

Hi,

can you explain what you feel is not working on the iPhone on that table? The Responsive Tables Extension kicks in and flips the table to a vertical column.
Then, as you have the “Custom CSS” for table 8, it will increase the height of the rows there.

For the border issue: Please replace the piece of “Custom CSS”

.tablepress td {
	border: 1px solid #DDDDDD;
}

to

.tablepress td {
	border: 1px solid #DDDDDD !important;
}

Regards,
Tobias

Hi Tobias,

Thanks for your help.
My problem in the smartphone view now, is the width of the table.
We have to scroll to the right to see the entire table.

I put your Css code to the tble 8 too :
@media (max-width: 767px) {
.tablepress-id-8 tbody td {
height: 190px;
}
}

Regards,

Hi,

ah, ok, now I see what you mean. This is caused by a white space setting that usually makes sense for data in smaller tables. Not in this case though.

Also, it’s not really necessary to set the heights like this here, as the table only has one row. Therefore, I suggest to change the “Custom CSS” that you posted to

@media (max-width: 767px) {
  .tablepress-id-8 tbody td {
    white-space: normal;
  }
}

Also, note that you did not actually add this for table 8. You replaced the CSS for table 3, as it seems, so table 3 will probably look wrong now.

Regards,
Tobias