Auto adjust columns

  • Resolved gerrald123

    (@gerrald123)


    9 years, 8 months ago

    Hi Tobias,
    First thanks for your amazing plugin!

    I’m trying to copy the Pro-Con-tables from http://10beasts.com/best-wireless-routers/ to my site: 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

    (@nichepie)

    9 years, 8 months ago

    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/

    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

    (@tobiasbg)

    9 years, 8 months ago

    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

    (@gerrald123)

    9 years, 8 months ago

    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

    (@tobiasbg)

    9 years, 8 months ago

    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/ which uses a CSS hack for this. A better solution would be to use other HTML elements, like <div> containers together with CSS code.

    Regards,
    Tobias

    Thread Starter gerrald123

    (@gerrald123)

    9 years, 5 months ago

    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/

    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

    (@tobiasbg)

    9 years, 5 months ago

    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

    (@gerrald123)

    9 years, 5 months ago

    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

    (@tobiasbg)

    9 years, 5 months ago

    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.