WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Reponsive issue (8 posts)

  1. tessadavis
    Member
    Posted 6 months ago #

    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/

    (need to press the text to dropdown).

    Can you advise?

    http://wordpress.org/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 6 months ago #

    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

  3. tessadavis
    Member
    Posted 6 months ago #

    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/ as a better example of the mobile issue? The table runs over the edge and is unviewable in the mobile version...

    Thanks

  4. TobiasBg
    Member
    Plugin Author

    Posted 6 months ago #

    Hi Tessa,

    the table on 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

  5. tessadavis
    Member
    Posted 6 months ago #

    Thanks - I think I have now added all of this, but it still does not work correctly...

  6. TobiasBg
    Member
    Plugin Author

    Posted 6 months ago #

    Hi Tessa,

    it seems that you have not adjusted the Shortcode yet? It does not seem to have the

    responsive=tablet

    parameter.

    Regards,
    Tobias

  7. tessadavis
    Member
    Posted 5 months ago #

    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 /]

  8. TobiasBg
    Member
    Plugin Author

    Posted 5 months ago #

    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

Reply

You must log in to post.

About this Plugin

About this Topic

Tags