Title: Responsive Not Working
Last modified: August 28, 2021
---
# Responsive Not Working
* Resolved [bartson2](https://wordpress.org/support/users/bartson2/)
* (@bartson2)
* [4 years, 9 months ago](https://wordpress.org/support/topic/responsive-not-working-26/)
* I am delinquent with my donation commitment so I just donated another $100. I
wonder if you would prefer me to use the Patreon thing instead. Your plugin is
dynamite but web development is not my main vocation so I am learning it slowly.
* 1. I have two tables with a vertical space between them, and am using responsive
TP so they show Left to Right on big screen and Top to Bottom on phone.
[https://patchencalifornia.com/crowds/season-hours/](https://patchencalifornia.com/crowds/season-hours/)
Somehow I came up with this to make it work; [table id=55 cache_table_output=”
0″ /]. Is there a better way? The last column in Table 22 is a clumsy attempt
to separate the two tables but it looks bad on phone. Any ideas?
* 2. I notice if I insert an image using the TablePress editor, it inserts different
code than if I paste html from the WordPress editor. What is the significance
and is one method preferable or acceptable?
[https://patchencalifornia.com/trees/bargains/](https://patchencalifornia.com/trees/bargains/)
* 3. I have the responsive extension installed on two sites and it works on one
but not the other.
WORKS [https://patchencalifornia.com/trees/](https://patchencalifornia.com/trees/)
DOES NOT WORK [https://oldsummit.com/treefresh/](https://oldsummit.com/treefresh/)
or [https://oldsummit.com/](https://oldsummit.com/)
* The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fresponsive-not-working-26%2F%3Foutput_format%3Dmd&locale=en_US)
to see the link]_
Viewing 11 replies - 1 through 11 (of 11 total)
* Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
* (@tobiasbg)
* [4 years, 9 months ago](https://wordpress.org/support/topic/responsive-not-working-26/#post-14814990)
* Hi,
* thanks for your post, and sorry for the trouble.
Also, thanks again for your
donation, I really appreciate it! Both Patreon and PayPal (I assume that you
saw the links on [https://tablepress.org/donate/](https://tablepress.org/donate/))
are fine for me 🙂
* 1. This is an interesting approach, and it works nicely! You could maybe hide
that extra column on phones (when the tables are shown underneath each other).
For that, please add this to the “Custom CSS” textarea on the “Plugin Options”
screen of TablePress:
* ```
@media screen and (max-width:836px) {
.tablepress-id-22 .column-8 {
display: none;
}
}
```
* 2. What exact code difference are you seeing? Can you paste the codes here again(
wrapped in backticks ` so that the code is preserved and not interpreted by the
browser)?
* 3. Just installing and activating the Extension is not enough. Did you add a `
responsive=...` parameter to the table Shortcode on [https://oldsummit.com/treefresh/](https://oldsummit.com/treefresh/)?
* Best wishes,
Tobias
* Thread Starter [bartson2](https://wordpress.org/support/users/bartson2/)
* (@bartson2)
* [4 years, 9 months ago](https://wordpress.org/support/topic/responsive-not-working-26/#post-14815092)
* #1. I don’t understand why this works.
[table id=55 cache_table_output=”0″ /]
Surly there is a proper way to put two tables side by side?
* The css worked perfectly.
* #2. `
`
* `
`
* The difference is the placement of the “class” and the added “size-thumbnail”
* #3. Sorry, some rubish had snuck into the code. Fixed that and it functions but
does not allow scrolling of the whole table.
[https://oldsummit.com/home](https://oldsummit.com/home)
* Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
* (@tobiasbg)
* [4 years, 9 months ago](https://wordpress.org/support/topic/responsive-not-working-26/#post-14817785)
* Hi,
* 1. That Shortcode has nothing to do with the tables being shown next to each
other. That’s kind of coming from the way how your theme’s CSS is structured.
And that is the proper way to do this 🙂
* 2. Thanks for the code! The placement of the various parameters is not relevant
here. They are interpreted in the same way. The `size-thumbnail` is a CSS class
that could potentially cause differences, if your theme where to apply CSS code
to it. If the image is shown fine, there’s nothing that needs to be changed here.
* 3. Once I make the browser window narrow, I can actually scroll the table horizontally.
Isn’t that what you want?
* Regards,
Tobias
* Thread Starter [bartson2](https://wordpress.org/support/users/bartson2/)
* (@bartson2)
* [4 years, 9 months ago](https://wordpress.org/support/topic/responsive-not-working-26/#post-14819529)
* #1. Got it, Thank you
#1. Got it, Thank you #1. Yes; the scroll works but notice
how the images on the right side disappear, at least on Chrome.
* Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
* (@tobiasbg)
* [4 years, 9 months ago](https://wordpress.org/support/topic/responsive-not-working-26/#post-14820470)
* Hi,
* #3: I’m not sure what you mean. Do they disappear when scrolling? Or what am
I missing? Can you maybe post a link to a screenshot (e.g. uploaded to a service
like [https://imgur.com/](https://imgur.com/)).
* Regards,
Tobias
* Thread Starter [bartson2](https://wordpress.org/support/users/bartson2/)
* (@bartson2)
* [4 years, 9 months ago](https://wordpress.org/support/topic/responsive-not-working-26/#post-14823628)
* [https://www.dropbox.com/sh/jb25t3iesvfx6w4/AAC2XhFmoIHN1uEhLv0V8OORa?dl=0](https://www.dropbox.com/sh/jb25t3iesvfx6w4/AAC2XhFmoIHN1uEhLv0V8OORa?dl=0)
* Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
* (@tobiasbg)
* [4 years, 9 months ago](https://wordpress.org/support/topic/responsive-not-working-26/#post-14824357)
* Hi,
* ah, thanks! I see what you mean.
To fix that, please add this to the “Custom
CSS” textarea on the “Plugin Options” screen of TablePress:
* ```
.tablepress img {
max-width: none !important;
}
```
* Regards,
Tobias
* Thread Starter [bartson2](https://wordpress.org/support/users/bartson2/)
* (@bartson2)
* [4 years, 8 months ago](https://wordpress.org/support/topic/responsive-not-working-26/#post-14887501)
* My apologies for the delayed response. Your suggestion worked just fine – thank
you. My last question is “why”? Please forgive my lack of experience but it seems
that WordPress, the theme, and the plug-in, all with their own CSS are in a constant
struggle, and the !important term settles the argument. My choice would be to
set each column to a specific width (adding up to a fixed total of course). The
image resizing and text wrapping only add confusion for the user. Why not just
let the scrolling do what it seemingly is intended to do?
* EXAMPLE:
I have a table of 8 columns (50px,250px,50px,250px,50px,250px,50px,
250px). Would not one of the following be the proper form?
* [table id=97c responsive=scroll column_widths=”50px|200px|50px|200px|50px|200px
|50px|200px” /]
or [table id=97c responsive=scroll column_widths=”5%|20%|5%|
20%|5%|20%|5%|20%” /]
* The scroll works but only after totally distorting the column widths by shrinking
the images and wrapping the text.
[https://patchencalifornia.com/workers/cashier/2/](https://patchencalifornia.com/workers/cashier/2/)
* Jim
* Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
* (@tobiasbg)
* [4 years, 8 months ago](https://wordpress.org/support/topic/responsive-not-working-26/#post-14888295)
* Hi Jim,
* the “why” is rather difficult to answer here. Essentially, it comes down to conflicting
goals (a columns wants to be “this” wide, but an image in it wants to be “that”
wide), which the browser has to fulfill when it’s rendering the page. It then
has to take into account the CSS code from various sources, which can be defined
with different priorities (that’s what the `!important` influences, for example),
as well as the HTML/CSS specifications, and so on.
One priority there actually
is that it wants to make as much content visible as possible. That’s why it doesn’t
like tables overflowing to the right, and will instead shrink images (if the
CSS gives it that possibility) or it will word-wrap text.
* Now, your definition of the column width is technically correct — but I don’t
recommend this particular form, and instead recommend the direct CSS way (i.e.
* ```
.tablepress-id-97c .column-1,
.tablepress-id-97c .column-3,
.tablepress-id-97c .column-5,
.tablepress-id-97c .column-7 {
width: 50px;
}
.tablepress-id-97c .column-2,
.tablepress-id-97c .column-4,
.tablepress-id-97c .column-6,
.tablepress-id-97c .column-8 {
width: 250px;
}
```
* This has more flexibility, as you can set other CSS properties at the same time.
For example, you could also add
* ```
min-width: 50px;
```
* and
* ```
min-width: 250px;
```
* to these CSS blocks — which essentially will give the browser another constraint
that it has to work into the rendering of the tables.
In your case, it should
be the desired one: The tables will then extend to the right, so that scrolling
can kick in.
* Regards,
Tobias
* Thread Starter [bartson2](https://wordpress.org/support/users/bartson2/)
* (@bartson2)
* [4 years, 8 months ago](https://wordpress.org/support/topic/responsive-not-working-26/#post-14890138)
* Thank you. That works perfectly.
* Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
* (@tobiasbg)
* [4 years, 8 months ago](https://wordpress.org/support/topic/responsive-not-working-26/#post-14890893)
* Hi,
* no problem, you are very welcome! 🙂 Good to hear that this helped!
* Best wishes,
Tobias
Viewing 11 replies - 1 through 11 (of 11 total)
The topic ‘Responsive Not Working’ is closed to new replies.
* 
* [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/)
* [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq)
* [Support Threads](https://wordpress.org/support/plugin/tablepress/)
* [Active Topics](https://wordpress.org/support/plugin/tablepress/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/)
* 11 replies
* 2 participants
* Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
* Last activity: [4 years, 8 months ago](https://wordpress.org/support/topic/responsive-not-working-26/#post-14890893)
* Status: resolved