WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] iPhone CSS (21 posts)

  1. corpcasting
    Member
    Posted 1 year ago #

    Hey guys. Do you have any CSS I can throw in to help one of my tables on iPhone? It spills off to the right (doesn't contain it within the screen) and there's no way to zoom in or out or scroll over to see the rest.

    This page seems to be okay on iPhone: http://30a.com/deals/

    This one does not: http://30a.com/where-can-i-get-the-30a-card/

    Thanks!!

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

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your question.

    Tables on phones are in general tricky, due to the limited amount of space. You might therefore want to check out a responsive approach. For TablePress, you could try this Extension: http://tablepress.org/extensions/responsive-tables/

    Regards,
    Tobias

  3. Frank Warwick
    Member
    Posted 1 year ago #

    HI Tobias,
    I am having an issue with responsive images, basically they are shrinking so small on the phone that they are just dots.

    Can I make changes to the @media call to fix this?

    When viewed on a mobile via 'view full site' the icons are presented correctly
    but
    When viewed in 'Mobile site' mode the images are pin sized

    I am using Headway theme framework
    · Website: http://myworkmate.com.au/about-my-workmate/
    · TablePress: 0.9-RC
    · TablePress (DB): 17
    · TablePress table scheme: 3
    · Plugin installed: 2013/02/27 09:58:52
    · WordPress: 3.5.1
    · Multisite: yes
    · PHP: 5.2.17
    · mySQL (Server): 5.0.96-community
    · mySQL (Client): 5.0.96
    · ZIP support: yes
    · UTF-8 conversion: yes
    · WP Memory Limit: 64M
    · Server Memory Limit: 256M
    · Magic Quotes: on
    · WP_DEBUG: false

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your post, and sorry for the trouble.

    This is actually not caused by TablePress (or the Responsive Tables Extension, which you are not actually using for that table), but by the theme's CSS. That's telling the browser to shrink the images on mobile devices. The browser will then however give a higher priority to the text, so that the images shrink to a minimal width.
    To change that in tables, please try adding this to the "Custom CSS" textarea on the "Plugin Options" screen of TablePress:

    .tablepress img {
        max-width: none !important;
    }

    Regards,
    Tobias

  5. corpcasting
    Member
    Posted 1 year ago #

    Thanks Tobias.

  6. Frank Warwick
    Member
    Posted 1 year ago #

    Hi Tobias, thanks for the reply on this issue
    That css stops the image from shrinking at all so it does not address the responsive issue.
    You said

    the Responsive Tables Extension, which you are not actually using for that table

    I added the [table id=123 responsive="all" /] and I only have the first row showing on all devices, I went through 'phone', 'mobile' 'desktop' but each setting has restrictions on other devices. and the images size on all of them is not responsive.

  7. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    @corpcasting: Sure, no problem, you are very welcome!

    @Frank: The Responsive Tables Extension is not really useful for your kind of table. It's more targeted at tables that have a header row and show rows that are like "entries" of data. For your table, which serves visual purposes, this approach does not work (and it does not influence images). You should therefore not use the Responsive Tables Extension for this table.
    And you are right, my suggested CSS will give those images that same fixed width on all devices. If that's not what you want, you could set a minimum width on the images, so that they don't shrink to dots. So, please remove the CSS I suggested and instead add

    .tablepress-id-2 img {
        min-width: 20%;
    }

    Regards,
    Tobias

  8. Frank Warwick
    Member
    Posted 1 year ago #

    Thanks again for you quick reply Tobias,
    This is causing issues with the placement ie, text on the right over lapping the image in full size and not making any difference to the image size.
    I tried all different % but no change

  9. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    ok, one more idea: Instead of setting a minimum percentage width on the images, we can try to set a minimum absolute width on the first column. Please try again with

    .tablepress-id-2 .column-1 {
        min-width: 50px;
    }

    Regards,
    Tobias

  10. Frank Warwick
    Member
    Posted 1 year ago #

    Thank you Tobias
    That makes it work, much appreciated, I am on my way to donate for not only the great product but the superb support.

    Thanks again and all the best

  11. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Frank,

    very nice! Great to hear that his helped! :-)

    And thanks for wanting to donate, I really appreciate it!

    Best wishes,
    Tobias

    P.S.: In case you haven't, please rate TablePress here in the plugin directory. Thanks!

  12. corpcasting
    Member
    Posted 1 year ago #

    Hey Tobias,

    I'm not sure this is functioning properly. It took the table and made it horizontal. It's nearly impossible to navigate on mobile. When I had "responsive=all", the same thing happened on desktop, even though there was plenty of room. I changed it back to just "responsive=phone" so you could check it out. Link - http://30a.com/where-can-i-get-the-30a-card/

    Thanks.

  13. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    I just checked your site on my phone, and everything is working as intended, from a technical point of view. However, I agree that this solution is not really helpful for your site/table. The theme leaves (comparably) big margins around the table, and due to the width/length of the table head cells, the remaining place for the body cells is rather small (only like half the width of the screen). Scrolling itself is working fine there, but the benefit is doubtful. Thus, this solution might not be the best solution for a responsive layout on phones - for this table.
    Unfortunately, I don't have further ideas to achieve a responsive table here :-( Sorry.

    Regards,
    Tobias

  14. corpcasting
    Member
    Posted 1 year ago #

    Tobias,

    No problem. I appreciate the response.

    Thanks!

  15. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    my pleasure! I hope that the plugin is still useful!

    Best wishes,
    Tobias

  16. corpcasting
    Member
    Posted 1 year ago #

    Most definitely!! One of the best plugins I've ever used. :)

  17. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks, that's nice to hear :-)

    Regards,
    Tobias

  18. corpcasting
    Member
    Posted 1 year ago #

    Hey Tobias,

    Another quick CSS question. How can I reduce a bit of the blank space above the table?

    http://30a.com/deals

    Thanks!

  19. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    there seems to be some weird HTML code there, that you should remove.
    For that, please go to the "Edit" screen of the page (where you entered the Shortcode), and switch from the "Visual" to the "Text" editor.
    You should then see some HTML code, like a link without a link text, between the Shortcode and the link Click here to find a local business that sells The 30A Card. That should be cleaned up and removed.

    Regards,
    Tobias

  20. corpcasting
    Member
    Posted 1 year ago #

    Hmm.. Ok. It was the ad banner I had in there causing it. Thanks.

  21. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    Yes, that seems to be it!

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.