Need to stack columns with rows below for mobile view

Hi,

thanks for your question, and sorry for the trouble.

I see what you mean, but unfortunately, I’ll have to disappoint you here. Due to how HTML tables are displayed by the browser, stacking columns like that is not possible ??

To achieve what you want, you could try creating a table with 3 columns and just 1 row (just put the content in those cells underneath each other). Alternatively, you’d have to use other HTML elements on the page, like <div> containers, to create columns that can be grouped.

Regards,
Tobias

Hi,
Thanks for pointing this out about HTML tables. When the columns are stacked by single row, the images shrinks in size to thumbnail size. Do you know how I can keep the full image size?

Hi,

I’m not sure what exactly you mean. The current behavior? That’s influenced by the CSS

.tablepress-id-1 img {
    width: 100%;
}

that you added to the “Custom CSS”.

Regards,
Tobias

I deleted the 2 rows below each column and added responsive=flip.
You can see the images stack, but the images are very small because they are being resized as though they appeared 3 to a screen, instead of one to a screen. The width: 100% is not working, each image appears more like 30% of width. Do you know how to get the image to appear 80-100% of width so it fills the screen?

Hi,

that’s because of the CSS

.tablepress-id-1 td {
  width: 33%;
}

which will need a small adjustment to

@media screen and (min-width: 768px) {
  .tablepress-id-1 td {
    width: 33%;
  }
}

Regards,
Tobias

Now it’s too big, and doesn’t auto-adjust to the screen size. On the phone, only half the image displays. Is there a script to size it to fit the screen? Thanks

Hi,

it seems that you solved this by creating the columns with a different solution now?

Regards,
Tobias

Hi Tobias,
I used Tablepress for a different project that required spreadsheets of data and it worked beautifully. You are correct that I am trying to achieve a layout with images that Tablepress wasn’t designed to do. I think it’s safe to close this ticket. Thank you for all the time you put into the issue.

Yes, I used the plug-in “Pricing System by Supsystic”. Again, I’m very sorry I took your time with this. Your plug-in is so fabulous it’s easy to default to it anytime you need a table for anything.

Hi,

nice! Good to hear that you found a solution for your use case!

Best wishes,
Tobias