Title: Reponsive issue Last modified: August 21, 2016 --- # Reponsive issue * Resolved [tessadavis](https://wordpress.org/support/users/tessadavis/) * (@tessadavis) * [12 years, 6 months ago](https://wordpress.org/support/topic/reponsive-issue/) * Thanks for an ace plugin. I have downloaded the responsive add-on (and will, of course, make a donation once it’s working). * Have just added the responsive=”tablet” to the first two tables and it doesn’t look right. * You can see them on * [http://dontforgetthebubbles.com/blood-pressure-centiles/](http://dontforgetthebubbles.com/blood-pressure-centiles/) * (need to press the text to dropdown). * Can you advise? * [http://wordpress.org/plugins/tablepress/](http://wordpress.org/plugins/tablepress/) Viewing 7 replies - 1 through 7 (of 7 total) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [12 years, 6 months ago](https://wordpress.org/support/topic/reponsive-issue/#post-4175607) * Hi, * thanks for your post, and sorry for the trouble. * From what I can see, this seems to be caused by two things: For the first two rows, you have set a border of `none`, while the other rows have a 3px colored border. You should therefore also set a 3px colored border (where the border color is the same as the background color on the first two rows). Additionally, you seem to have restricted the widths of the cells to `50px`. This unfortunately will not work for the first row, once it is flipped. You should therefore not restrict the width of the first row. * Could you please try that? * Regards, Tobias * Thread Starter [tessadavis](https://wordpress.org/support/users/tessadavis/) * (@tessadavis) * [12 years, 5 months ago](https://wordpress.org/support/topic/reponsive-issue/#post-4175929) * Apologies – I didn’t realise that you had replied. * The example I’ve given you is a bad example as I’m trying to combine the top two rows in those tables. * Could you look at [http://dontforgetthebubbles.com/genetic-syndromes/](http://dontforgetthebubbles.com/genetic-syndromes/) as a better example of the mobile issue? The table runs over the edge and is unviewable in the mobile version… * Thanks * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [12 years, 5 months ago](https://wordpress.org/support/topic/reponsive-issue/#post-4175932) * Hi Tessa, * the table on [http://dontforgetthebubbles.com/genetic-syndromes/](http://dontforgetthebubbles.com/genetic-syndromes/) does not have the Responsive Tables Extension enabled (it doesn’t seem to use the Shortcode parameter), so it is kind of expected that the table runs over the edge on small screens, as the content has to go somewhere, after all. * I therefore suggest to try the Responsive Tables Extension again, e.g. with * ``` [table id=1 responsive=tablet /] ``` * , and to make it work also add/change this “Custom CSS”: The first block should be extended to * ``` .tablepress thead th, .tablepress tfoot th { background-color: #00c8bd !important; border: 3px solid #00c8bd!important; } ``` * Then, please also add * ``` @media (max-width: 979px) { .tablepress-id-1 .column-5 { height: 165px; width: auto !important; } } ``` * Regards, Tobias * Thread Starter [tessadavis](https://wordpress.org/support/users/tessadavis/) * (@tessadavis) * [12 years, 5 months ago](https://wordpress.org/support/topic/reponsive-issue/#post-4175938) * Thanks – I think I have now added all of this, but it still does not work correctly… * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [12 years, 5 months ago](https://wordpress.org/support/topic/reponsive-issue/#post-4175939) * Hi Tessa, * it seems that you have not adjusted the Shortcode yet? It does not seem to have the * ``` responsive=tablet ``` * parameter. * Regards, Tobias * Thread Starter [tessadavis](https://wordpress.org/support/users/tessadavis/) * (@tessadavis) * [12 years, 5 months ago](https://wordpress.org/support/topic/reponsive-issue/#post-4175957) * Perhaps I am putting it in the wrong place. * In the page where I add the table shortcode I have: * [table id=1 responsive=tablet /] * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [12 years, 5 months ago](https://wordpress.org/support/topic/reponsive-issue/#post-4175958) * Hi, * ok, now the Shortcode is correct, and the function is active. If you reduce the width of your browser window (or try on a table), you will see the responsive behavior. * However, that’s not really helpful here, I guess, as on small screens the sidebar on the left still takes a lot of space and only gives very little space to the table. Due to that, the table still won’t look good 🙁 The only fix here that I see, would be to make the theme more responsive in general, for example with moving or hiding the sidebar on small screens. The Responsive Tables Extension alone will not help here 🙁 * Regards, Tobias Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Reponsive issue’ is closed to new replies. * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944) * [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/) * 7 replies * 2 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [12 years, 5 months ago](https://wordpress.org/support/topic/reponsive-issue/#post-4175958) * Status: resolved