Table Press and Responsive themes?

Hi Tobias:

I’m having trouble resolving an issue you’ve commented on above with responsive theme. I am using Tablepress to help keep a page well organized with text and images. Problem is when the browser width changes the images don’t resize. And yes, I put each image into a cell in the table. How do I achieve the same results and make the images “float”?

Thanks!

Roger

Hi Roger,

thanks for your post and sorry for the trouble!

Could you please post a link to the page with the table, where this is happening, so that I can take a direct look? Thanks!

Regards,
Tobias

https://lawntractor.abihosting.co/zero-turn-mowers-with-grass-catchers/
https://lawntractor.abihosting.co/tractors-with-grass-catchers/
https://lawntractor.abihosting.co/tractors-without-grass-catchers/ (scroll down to fender clearance)
https://lawntractor.abihosting.co/walk-behind-mowers/

Thanks for such a quick response!

Hi,

thanks for the links!

Now, I’m confused though. On all of these pages, the images shrink when I resize my browser window. Isn’t that the behavior that you wanted?

Regards,
Tobias

The images in the table are not resizing on my monitor when I change the width of my browser (Firefox). I do see the text changing. The Fender images do not change nor do I see the grass catcher images changing.

I know you mentioned about not putting the images in their own cells which is what I did. I’m just not sure how to position them without putting them in to table.

Hi,

indeed, in Firefox, they are not shrinking… In Google Chrome, this works just fine. Strange…

Please try adding this to the “Custom CSS” textarea in TablePress:

.tablepress img {
  width: 100%;
}

That should make it work in Firefox as well.

Regards,
Tobias

Thanks…getting closer! Added the Custom CSS then tested this link. After squeezing browser and then setting it back to full size, the left image is now oversized and doesn’t reset to original dims.

https://lawntractor.abihosting.co/zero-turn-mowers-with-grass-catchers

Hi,

ok, we might have to set the columns to equal widths in that table:

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

Regards,
Tobias

Awesome! You are a genius! Donation sent!

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!
And thanks for the donation, I really appreciate it!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Hi I am having the same problem my site is responsive but the tables are not. The image in the table do not resize either

Hi,

thanks for your post, and sorry for the trouble.

Could you please post a link to the page with the table in question, so that I can take a direct look? Thanks!

Regards,
Tobias

Hi Tobias:

The table is making my images larger than their original size which is 400x300px when viewed on large desktop display.

https://lawntractor.abihosting.co/tractors-with-grass-catchers/

I want them to shrink when responsive theme is smaller width but is there a way to set their maximum allowed size so it doesn’t go bigger than their original dimensions?

Hi,

ok, then please try adding

.tablepress-id-1 img {
  width: auto;
}

With that, the images should obey the width that is set in the HTML.

Regards,
Tobias