Title: iPhone CSS Last modified: August 20, 2016 --- # iPhone CSS * Resolved [corpcasting](https://wordpress.org/support/users/corpcasting/) * (@corpcasting) * [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/) * 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/](http://30a.com/deals/) * This one does not: [http://30a.com/where-can-i-get-the-30a-card/](http://30a.com/where-can-i-get-the-30a-card/) * Thanks!! * [http://wordpress.org/extend/plugins/tablepress/](http://wordpress.org/extend/plugins/tablepress/) Viewing 15 replies - 1 through 15 (of 20 total) 1 [2](https://wordpress.org/support/topic/iphone-css-1/page/2/?output_format=md) [→](https://wordpress.org/support/topic/iphone-css-1/page/2/?output_format=md) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/#post-3566087) * 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/](http://tablepress.org/extensions/responsive-tables/) * Regards, Tobias * [Frank Warwick](https://wordpress.org/support/users/wackonerd/) * (@wackonerd) * [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/#post-3566091) * 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](https://wordpress.org/support/users/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/](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 [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/#post-3566096) * 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 * Thread Starter [corpcasting](https://wordpress.org/support/users/corpcasting/) * (@corpcasting) * [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/#post-3566131) * Thanks Tobias. * [Frank Warwick](https://wordpress.org/support/users/wackonerd/) * (@wackonerd) * [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/#post-3566132) * 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 [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/#post-3566138) * Hi, * [@corpcasting](https://wordpress.org/support/users/corpcasting/): Sure, no problem, you are very welcome! * [@frank](https://wordpress.org/support/users/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 * [Frank Warwick](https://wordpress.org/support/users/wackonerd/) * (@wackonerd) * [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/#post-3566140) * 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 [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/#post-3566142) * 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 * [Frank Warwick](https://wordpress.org/support/users/wackonerd/) * (@wackonerd) * [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/#post-3566144) * 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 [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/#post-3566152) * 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](http://wordpress.org/support/view/plugin-reviews/tablepress) here in the plugin directory. Thanks! * Thread Starter [corpcasting](https://wordpress.org/support/users/corpcasting/) * (@corpcasting) * [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/#post-3566212) * 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/](http://30a.com/where-can-i-get-the-30a-card/) * Thanks. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/#post-3566213) * 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 * Thread Starter [corpcasting](https://wordpress.org/support/users/corpcasting/) * (@corpcasting) * [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/#post-3566214) * Tobias, * No problem. I appreciate the response. * Thanks! * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/#post-3566215) * Hi, * my pleasure! I hope that the plugin is still useful! * Best wishes, Tobias * Thread Starter [corpcasting](https://wordpress.org/support/users/corpcasting/) * (@corpcasting) * [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/#post-3566216) * Most definitely!! One of the best plugins I’ve ever used. 🙂 Viewing 15 replies - 1 through 15 (of 20 total) 1 [2](https://wordpress.org/support/topic/iphone-css-1/page/2/?output_format=md) [→](https://wordpress.org/support/topic/iphone-css-1/page/2/?output_format=md) The topic ‘iPhone CSS’ is closed to new replies. * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944) * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/) * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq) * [Support Threads](https://wordpress.org/support/plugin/tablepress/) * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/) * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/) * 20 replies * 3 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [13 years, 2 months ago](https://wordpress.org/support/topic/iphone-css-1/page/2/#post-3566236) * Status: resolved