Table width on mobile view

  • Resolved russclem

    (@russclem)


    11 years ago

    Hi there,

    The creators of the theme I have currently been using have been impressively useless with regards to an issue I have, so I thought I’d try your plugin as a workaround.

    Basically, whenever I add tables, the theme’s own css messes things up in the mobile view, that’s in chrome on android.

    So I decided to try to use your plugin, to see if it would solve the problem, and it looks like it has, but there’s one issue. You can see it if you visit http://www.projectbase.eu – in the Meet the Team section, on an android device. How can I make the table fit the screen? I’ve added the following code to the custom CSS, but it’s not helping…

    .tablepress-id-1 {
    width: 40%;
    }

    Where am I going wrong?

    Many thanks for your time, and for your awesome plugin!

    Russell

    https://ww.wp.xz.cn/plugins/tablepress/

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 years ago

    Hi Russel,

    thanks for your post, and sorry for the trouble.

    Adjusting the width of the table is not really helping here, as the images will still stretch beyond that. We could however tell the browser to make the images fit.
    For that, please replace the current “Custom CSS” that you have with

    .tablepress-id-1 td {
    width: 50%;
}
.tablepress-id-1 img {
    max-width: 100%;
}

    Regards,
    Tobias

    Thread Starter russclem

    (@russclem)

    11 years ago

    Amazing, that’s fixed it!

    Thanks so much!

    Thread Starter russclem

    (@russclem)

    11 years ago

    Actually, before I speak to soon, further down the page, there’s another table in the Projects and Media sections. That all displays fine on a normal screen, but all gets bunched up on mobile view.

    Where’ve I gone wrong?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 years ago

    Hi,

    good to hear that this helped!

    The table 2 is much trickier, and I can’t really offer a similarly easy solution 🙁
    Basically, that table has a rather tricky structure, with a table inside a table, etc. I’m afraid that there’s simply no nice and easy way to display that nicely on a small screen – as we are confined to the row/column/cell structure of a table here.

    If you split “Media” and “Projects” into two separate tables, the approach for table 1 might also work there.

    Regards,
    Tobias

    claudejo

    (@claudejo)

    11 years ago

    Tobias,

    Trying to adjust the width of the tables for mobile version but seemingly doing something wrong.

    In the Plugin Options Custom CSS I currently have:
    .tablepress thead th,
    .tablepress tfoot th {
    background-color: #263548;
    color: #ffffff;
    }
    .tablepress-id-N tbody td {
    color: #ffffff;
    }

    I added the following per your previous post but no change:
    .tablepress-id-1 td {
    width: 50%;
    }
    .tablepress-id-1 img {
    max-width: 100%;
    }

    What am I doing wrong? Thanks! Claude

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 years ago

    Hi Claude,

    thanks for your post, and sorry for the trouble.

    That code from above is a specific solution for russclem’s tables. It will not directly work with other tables.

    Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    claudejo

    (@claudejo)

    11 years ago

    Tobias,

    Thanks for the reply. The page you can normally see the table on is the following: http://www.claudejobin.com/ottawa-condos-for-sale/ottawa-central/sandy-hill/400-laurier-avenue-east/ The tables look fine on the desktop but in the mobile version of my site they dont currently adjust and so they overhang on the right side.

    You might need to wait a bit because last night as I was formating walkscore suddenly the website went down and my web hosters are still figuring it out (500 – Internal Server Error)
    https://www.walkscore.com/professional/get-code/free/78f8194c8bb249da9c707ffec4bb5923

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 years ago

    Hi,

    then you could be affected by the general problem of making tables responsive.
    Depending on your table, you could try the TablePress Responsive Tables Extension from http://tablepress.org/extensions/responsive-tables/ or the horizontal scrolling approach from https://ww.wp.xz.cn/support/topic/responsive-tables-scroll-only?replies=6#post-5511954

    And you are right, I’m getting a 500 Internal Server Error. I’d suggest that you notify me here once the site is working again, and maybe try the ideas from above.

    Regards,
    Tobias

    claudejo

    (@claudejo)

    11 years ago

    Tobias,

    The website is now fixed:
    http://www.claudejobin.com/ottawa-condos-for-sale/ottawa-central/sandy-hill/400-laurier-avenue-east/

    In addition to the adjustment to mobile (which I’ve never had) why are the tables showing up blue now they used to match the theme. Perhaps I need to specify colour in the css of the table.

    Thanks! Claude

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 years ago

    Hi Claude,

    the problem with mobile screens basically is that there’s too much content in the table for it to fit on small screens. This is a general issue with tables on the web, due to their fixed columns/rows structure.
    Some ideas for this are to flip the table to the side and make it horizontally scrollable, which is possible with the TablePress Extension from http://tablepress.org/extensions/responsive-tables/
    A simpler idea, scrolling without flipping could be the approach from https://ww.wp.xz.cn/support/topic/responsive-tables-scroll-only?replies=6#post-5511954 or simply enabling the “Horizontal Scrolling” checkbox on the “Edit” screen of the table.

    For the colors: That light blue is the default for TablePress tables (from the plugin’s default CSS file). Changing that is possible with some “Custom CSS”, e.g. from http://tablepress.org/faq/change-background-color-table-head-row/

    Regards,
    Tobias

    claudejo

    (@claudejo)

    11 years ago

    Tobias,

    First of all thank you for your help. Remind me how I can make a donation supporting your work in this endeavour. I didn’t try the extension you suggested (I suppose I could) I did the check mark on Enable horizontal scrolling but only my content is scrolling (nice) without the header (less good). Is it me? Thanks again! Claude

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 years ago

    Hi,

    thanks for wanting to donate, I really appreciate that! For details on that, please see http://tablepress.org/donate/

    Now, for the horizontal scrolling, I just checked the tables on http://www.claudejobin.com/ottawa-condos-for-sale/ottawa-central/sandy-hill/400-laurier-avenue-east/ in the emulator in Google Chrome and everything is scrolling fine (both the table header and the table body). Which table is not working correctly for you?

    Regards,
    Tobias

    claudejo

    (@claudejo)

    11 years ago

    Tobias,

    The page I was looking at is:

    http://www.claudejobin.com/ottawa-condos-for-sale/ottawa-central/sandy-hill/400-laurier-avenue-east/

    And suddenly it’s working. So you must have worked your magic. Thanks! Claude

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 years ago

    Hi,

    great! Thanks for the confirmation! Probably some temporary caching issue then 🙂

    Best wishes,
    Tobias

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Table width on mobile view’ is closed to new replies.