Responsive Table Images

Hi,

thanks for your question, and sorry for the trouble.

If you want the columns to appear at the same size, you will have to set column widths, and/or widths for the images.
On mobile, I recommend to set a smaller width, e.g. using a CSS3 Media Query.

As you have quite a few tables on that page, I would recommend to use the page ID in the CSS. That way, you don’t have to add the CSS for each table individually.

So, something like this maybe:

.page-id-546 .tablepress .column-1 img {
  width: 180px;
}

@media screen and (max-width: 768px) {
  .page-id-546 .tablepress .column-1 img {
    width: 90px;
  }
}

Note that the text in your table also has an effect on the width. For example, a first column will never be smaller than the name in the header (which for example affects “Stephanie” most). Also, the second column will never be smaller than the email addresses that you are showing, as the browser treats these as one very long word – to which it can not add line breaks automatically.

Regards,
Tobias

Thank you for all of this information.

I set the column width to 15% and the images look great on desktop and medium size screens. It seems to only be an issue on smartphone devices or extra small screens.

It actually looks like the text width is the sole factor creating the varying column widths on extra small screens. Some of them have resized to 15% of the phone screen correctly. But, the ones with longer words in the column did not resize correctly.

Is there any way I can treat the text as percentages? Or is there something that will resize the text proportionately? Right now I’m using pixels and I’m wondering if that’s something I can control differently to help.

Thank you

Hi,

yes, that’s correct. The ones with longer words can not resize to small values. After all, the text has to go somewhere, and therefore, the browser will make the columns wider.
You would have to add CSS to reduce the font size on small screens, like

@media screen and (max-width: 768px) {
  .page-id-546 .tablepress .column-1 {
    font-size: 12px;
  }
}

Having such a proportional scaling done automatically is not possible, unfortunately ??

Regards,
Tobias

Thanks for the media query recommendations! I may even look into a new table format just for mobile devices.

Hi,

yes, that might be a good idea. Tables are tough to get right on small screens ??

Regards,
Tobias