Image in the table didn’t resize

Resolved roweestall
(@roweestall)

9 years, 1 month ago
Hi, I want to ask how to at least make the image resize to a normal size and fit the theme. I’m using Fruitful theme and I know it is a bit narrower than other theme. For me as long as all the columns at the same size when I navigate to the next page of the table, it is okay.

I do use the CSS styling but I’m not sure why it didn’t use the fixed width that I input. Here is what I put in the custom CSS

.tablepress thead th,
.tablepress tfoot th {
background-color: #50c878;
}

.tablepress .odd td {
background-color: #f4fcf7;
}

.tablepress .even td {
background-color: #e5f7eb;
}

.tablepress-id-N .column-4 {
width: 500px;
}

.tablepress-id-N .column-4 {
padding: 1px;
}

.tablepress-id-N {
width: auto;
margin: 0 auto 1em;
}

.tablepress-style-3-column .column-3 {
width: 500px;
}

Here is the link to the image http://imgur.com/a/3XMI0

The first and second image is the one that I have problem with. The first 100 entries didn’t have any problem even though I want the fourth column to be a bit bigger. The second 100 entries, the fourth column getting bigger than the theme.

The third and fourth image is the one that I use .tablepress-style-3-column in the extra CSS class, the size of the third column is slightly change but didn’t get bigger than the theme width.

All using full image
class= alignnone size-full
- This topic was modified 9 years, 1 month ago by roweestall.
- This topic was modified 9 years, 1 month ago by roweestall.
- This topic was modified 9 years, 1 month ago by roweestall.

Viewing 13 replies - 1 through 13 (of 13 total)

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 1 month ago
Hi,

thanks for your question, and sorry for the trouble.

Instead of setting the width of the column, you will have to set the width of the image here, probably with
```
.tablepress-style-3-column .column-3 img {
  width: 500px;
}
```
Regards,
Tobias
Thread Starter roweestall
(@roweestall)

9 years, 1 month ago

I already insert the code that you give and try to delete the column width code, but it is still not working. Still like what i give you in the first post

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 1 month ago

Hi,

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Just the screenshot is not enough 🙁 Thanks!

Regards,
Tobias

Thread Starter roweestall
(@roweestall)

9 years, 1 month ago

Ah yes, i’m sorry for the trouble
http://roweestall.com/comic-frontier-8/
http://roweestall.com/creator-super-fest-2017/
Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 1 month ago
Hi,

thanks for the links!

Please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
```
.tablepress .wp-caption {
    max-width: 100%;
    width: auto !important;
}
```
That should fix the sudden change in size.

Regards,
Tobias
Thread Starter roweestall
(@roweestall)

9 years, 1 month ago

Thank you for the code, the sudden change already gone. Right now the problem is I can’t change the fourth column width. I change from 500px to 100px but no change.
This is the link http://roweestall.com/comic-frontier-8/

This is the in the plugin option
.tablepress thead th,
.tablepress tfoot th {
background-color: #50c878;
}

.tablepress .odd td {
background-color: #f4fcf7;
}

.tablepress .even td {
background-color: #e5f7eb;
}

.tablepress-id-N .column-4 img {
width: 500px;
}

.tablepress .wp-caption {
max-width: 100%;
width: auto !important;
}

.tablepress-id-N .column-4 {
padding: 1px;
}

.tablepress-id-N {
width: auto;
margin: 0 auto 1em;
}

.tablepress-style-3-column .column-3 img {
width: 500px;
}

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 1 month ago

Hi,

you can’t really change it because the images are bigger than 100px.

Regards,
Tobias

Thread Starter roweestall
(@roweestall)

9 years ago

So I can’t make it a bit bigger? Around maybe 30% to 40% of the total width of 4 column table
Plugin Author Tobias Bäthge
(@tobiasbg)

9 years ago
Hi,

we could try setting a minimum width for the images:
```
.tablepress-id-7 .column-4 img {
  min-width: 200px;
}
```
Regards,
Tobias
Thread Starter roweestall
(@roweestall)

9 years ago

It works, thanks. Last question, the N value is for all tables right? When i use

.tablepress-id-N .column-4 img {
min-width: 300px;
}
the column wont change, but if i use

.tablepress-id-7 .column-4 img {
min-width: 300px;
}
it change as intended

I actually want to use it for all table if i can
Plugin Author Tobias Bäthge
(@tobiasbg)

9 years ago
Hi,

almost. The code to have this applied to all tables is
```
.tablepress .column-4 img {
  min-width: 300px;
}
```
(so, without any -id-... part).

Note that this will really affect all tables, so that you might lose flexibility if you later add tables where you want a different behavior in the fourth column. You might therefore also think about using “Extra CSS classes”. For an example, please see https://wordpress.org/support/topic/centering-text-in-select-columns/ and https://wordpress.org/support/topic/extra-css-syntax/

Regards,
Tobias
Thread Starter roweestall
(@roweestall)

9 years ago

Ah so no N part. Thanks.
Thank you for helping me these past few days and not getting angry. Lol. I’m still new in this coding thing. Next time i have question i will make sure to give the link and other thing immediately.

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years ago

Hi,

no problem, you are very welcome! 🙂 Good to hear that this helped!

Best wishes,
Tobias

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

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Image in the table didn’t resize’ is closed to new replies.