WordPress.org

Support

Support » Plugins and Hacks » TablePress » [Resolved] iPhone CSS

[Resolved] iPhone CSS

Viewing 15 replies - 1 through 15 (of 20 total)
  • Plugin Author TobiasBg

    @tobiasbg

    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

    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

    Plugin Author TobiasBg

    @tobiasbg

    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

    Thanks Tobias.

    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.

    Plugin Author TobiasBg

    @tobiasbg

    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

    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

    Plugin Author TobiasBg

    @tobiasbg

    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

    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

    Plugin Author TobiasBg

    @tobiasbg

    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!

    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.

    Plugin Author TobiasBg

    @tobiasbg

    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

    Tobias,

    No problem. I appreciate the response.

    Thanks!

    Plugin Author TobiasBg

    @tobiasbg

    Hi,

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

    Best wishes,
    Tobias

    Most definitely!! One of the best plugins I’ve ever used. 🙂

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘[Resolved] iPhone CSS’ is closed to new replies.
Skip to toolbar