Title: Auto adjust columns Last modified: September 10, 2016 --- # Auto adjust columns * Resolved [gerrald123](https://wordpress.org/support/users/gerrald123/) * (@gerrald123) * [9 years, 8 months ago](https://wordpress.org/support/topic/auto-adjust-columns/) * Hi Tobias, First thanks for your amazing plugin! * I’m trying to copy the Pro-Con-tables from [http://10beasts.com/best-wireless-routers/](http://10beasts.com/best-wireless-routers/) to my site: [http://www.zaagspecialist.nl/afkortzaag/](http://www.zaagspecialist.nl/afkortzaag/)( all down the page) * I’ve already have this CSS so far: * .tablepress-id-8 .row-1 .column-1 { background-color: #009906; } * .tablepress-id-8 .row-1 .column-2 { background-color: #ff0000; } * .tablepress-id-8 .row-1 .column-1 { color: #ffffff; } * .tablepress-id-8 .row-1 .column-2 { color: #ffffff; } * My question is: I want to make the tabel mobile + all responsive. I want the green and red column the same size. It doesn’t have to matter which size the screen is. * I already tried the extension with the scroll mode and this css: .tablepress. wp-caption { width: auto !important; * Can you help me on this? * Thanks! Viewing 8 replies - 1 through 8 (of 8 total) * [Luqman Khan](https://wordpress.org/support/users/nichepie/) * (@nichepie) * [9 years, 8 months ago](https://wordpress.org/support/topic/auto-adjust-columns/#post-8168613) * Luqman from 10beasts Here, * The Pros and Cons is not built using Tablepress plugin. I did that using Shortcode Ultimate plugin, which can be found here: [https://wordpress.org/plugins/shortcodes-ultimate/](https://wordpress.org/plugins/shortcodes-ultimate/) * After installing shortcode ultimate, add this in your theme css editor: .su- box { border-width: 0px !important; } .su-column-size-1-2 { width: 50% !important;}. su-row .su-column { margin: 0px 0 0 0% !important; } * After adding CSS Code: Please go to your post editor and add this shortcode there. * [su_row] [su_column size=”1/2″][su_box title=”Pros” box_color=”#00bf08″ radius =”0″][su_list icon=”icon: check” icon_color=”#00bf08″] PLEASE ADD THE PROS LIST HERE [/su_list][/su_box] * [/su_column] [su_column size=”1/2″][su_box title=”Cons” box_color=”#bf000a” radius=”0″][su_list icon=”icon: ban” icon_color=”#bf000a”] PLEASE ADD THE CONS LIST HERE [/su_list][/su_box] * [/su_column] [/su_row] * ** After adding this shortcode add both of your lists inside in the form of “ Bulleted List”. You will be done. * Let me know if you required further help. Cheers * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [9 years, 8 months ago](https://wordpress.org/support/topic/auto-adjust-columns/#post-8170065) * Hi, * thanks for your post, and sorry for the trouble. * First, thanks for sharing your solution, Luqman! * To achieve this with TablePress, it should only need a CSS command for the width: * ``` .tablepress-id-8 .column-1, .tablepress-id-8 .column-2 { width: 50%; } ``` * Can you please try that? * Regards, Tobias * Thread Starter [gerrald123](https://wordpress.org/support/users/gerrald123/) * (@gerrald123) * [9 years, 8 months ago](https://wordpress.org/support/topic/auto-adjust-columns/#post-8178577) * Hi Tobias, Thanks for your answer, it worked! * Is it possible that when someone is watching at a mobile phone, that the columns 1 and 2 go under each other? * Regards, Gerrald * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [9 years, 8 months ago](https://wordpress.org/support/topic/auto-adjust-columns/#post-8181337) * Hi, * good to hear that this worked! * Unfortunately, changing the view mode like that is not really possible with an HTML table, due to it’s fixed structure of columns and rows. You could try the` flip` mode of the TablePress Extension from [https://tablepress.org/extensions/responsive-tables/](https://tablepress.org/extensions/responsive-tables/) which uses a CSS hack for this. A better solution would be to use other HTML elements, like `
` containers together with CSS code. * Regards, Tobias * Thread Starter [gerrald123](https://wordpress.org/support/users/gerrald123/) * (@gerrald123) * [9 years, 5 months ago](https://wordpress.org/support/topic/auto-adjust-columns/#post-8548271) * Hi Luqman Khan, I have Shortcode Ultimate now, I put this in the CSS: .su-box{ border-width: 0px !important; } .su-column-size-1-2 { width: 50% !important; }. su-row .su-column { margin: 0px 0 0 0% !important; } * and this: [su_row] [su_column size=”1/2″][su_box title=”Pros” box_color=”#00bf08″ radius=”0″][su_list icon=”icon: check” icon_color=”#00bf08″] PLEASE ADD THE PROS LIST HERE [/su_list][/su_box] * [/su_column] [su_column size=”1/2″][su_box title=”Cons” box_color=”#bf000a” radius=”0″][su_list icon=”icon: ban” icon_color=”#bf000a”] PLEASE ADD THE CONS LIST HERE [/su_list][/su_box] * [/su_column] [/su_row] * I test at this page: [http://www.zaagspecialist.nl/lorem-ipsum/](http://www.zaagspecialist.nl/lorem-ipsum/) * But the only thing I get is two seperated lists, no colors or anything. Do you know what it can be? * Thanks! * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [9 years, 5 months ago](https://wordpress.org/support/topic/auto-adjust-columns/#post-8548338) * Hi, * it seems that you are using the wrong quotation marks. In your code, they are`”`( slightly curled), but they should be straight `"` everywhere. * Please try modifying this in the “Text” and not the “Visual” editor when editing that page. * Regards, Tobias * Thread Starter [gerrald123](https://wordpress.org/support/users/gerrald123/) * (@gerrald123) * [9 years, 5 months ago](https://wordpress.org/support/topic/auto-adjust-columns/#post-8548624) * Hi, First thanks for the very quick answer! You were right, I did use the wrong ones, it is working now. * Thanks again! * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [9 years, 5 months ago](https://wordpress.org/support/topic/auto-adjust-columns/#post-8549140) * Hi, * great! Thanks for the confirmation! * Best wishes, Tobias Viewing 8 replies - 1 through 8 (of 8 total) The topic ‘Auto adjust columns’ 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/) * 8 replies * 3 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [9 years, 5 months ago](https://wordpress.org/support/topic/auto-adjust-columns/#post-8549140) * Status: resolved