Title: Formatting for iPhone
Last modified: August 22, 2016
---
# Formatting for iPhone
* Resolved [stuffe](https://wordpress.org/support/users/stuffe/)
* (@stuffe)
* [11 years, 8 months ago](https://wordpress.org/support/topic/formatting-for-iphone/)
* I am trying to get the sign up sheets to show in full width on a mobile phone
device (currently an iphone, but others have the same issues I’m sure). Basically,
in portrait mode the table is cut off and won’t fit, but it’s OK when I flip
into landscape mode. I have done what I can to make the table less wide, inc.
changing my date format to the shortest possible without luck. Unfortunately
my theme prevents the main content DIV area from being any wider than the phone
resolution (480). Is there any way to make it fit?
* [https://wordpress.org/plugins/pta-volunteer-sign-up-sheets/](https://wordpress.org/plugins/pta-volunteer-sign-up-sheets/)
Viewing 4 replies - 1 through 4 (of 4 total)
* Plugin Author [DBAR Productions](https://wordpress.org/support/users/dbar-productions/)
* (@dbar-productions)
* [11 years, 8 months ago](https://wordpress.org/support/topic/formatting-for-iphone/#post-5461194)
* I just had someone else email me about this a few days ago. The short answer
is that it’s up to the theme and CSS to decide how to display the table… my table
styling is extremely minimal because I believe a plugin should only dictate functionality
and the theme should dictate appearance.
* Here is a support thread for another table plugin I found through a quick search
that very nicely explains it all:
* [https://wordpress.org/support/topic/plugin-wp-table-reloaded-resizing-of-tables-for-mobile?replies=6](https://wordpress.org/support/topic/plugin-wp-table-reloaded-resizing-of-tables-for-mobile?replies=6)
* Also, doing a quick search, I found this page that might offer some solutions
you can try in your own theme’s CSS file. My tables have class names, so you
can target them specifically and override the CSS by custom CSS in your theme’s
CSS file, or you can directly edit the style.css file for my plugin, which you
will find in the assets/css directory of my plugin. Here’s an article with some
CSS code you can try, as well as a couple of different alternate solutions:
* [http://css-tricks.com/responsive-data-tables/](http://css-tricks.com/responsive-data-tables/)
* Plugin Author [DBAR Productions](https://wordpress.org/support/users/dbar-productions/)
* (@dbar-productions)
* [11 years, 8 months ago](https://wordpress.org/support/topic/formatting-for-iphone/#post-5461196)
* Also, found a nice little jQuery plugin that will basically do the stacking thing
as described on the css-tricks.com page I linked to, but with jQuery instead.
I will think about including this as an option in a future release or a possible
add-on. I like to keep my plugins as simple as possible, without too much (usually
not any on the public side) dependence on jQuery/javascript, but this one may
be worth exploring a bit more:
[http://johnpolacek.github.io/stacktable.js/](http://johnpolacek.github.io/stacktable.js/)
* Thread Starter [stuffe](https://wordpress.org/support/users/stuffe/)
* (@stuffe)
* [11 years, 8 months ago](https://wordpress.org/support/topic/formatting-for-iphone/#post-5461255)
* Thanks for your swift reply. In the end I went direct to the Public PHP file (
I know this isn’t ideal, but…) and I wrapped both of the tables in the following:
*
Your tables here
* This means that even when the tables overflow out of the boundary, I can just
scroll them nicely, but it only shows a scroll bar when it does actually overflow.
* I had first tried just making the tables smaller by combining columns, so start
and end time became “times”, but even this couldn’t keep the width down for the
table of things I had already signed up for, and even then a particularly big
word in a field could still throw it even wider.
* The CSS for my theme picked up beautifully for everything else. I’m not sure
if you might want to think about adding a “make tables scrollable for mobile/
narrow screens” option that adds in the above if required, I can’t imagine anyones
default tables fitting on a phone by landscape by default
* Thanks again 🙂
* Plugin Author [DBAR Productions](https://wordpress.org/support/users/dbar-productions/)
* (@dbar-productions)
* [11 years, 8 months ago](https://wordpress.org/support/topic/formatting-for-iphone/#post-5461258)
* Thanks for the update! Your solution is much more simple! That’s something I
could easily include in the next update, perhaps with an option to turn it on/
off as you stated.
* I’m not very good with CSS and layout/design, which is why I don’t do themes!
=)
* Actually, there are a couple of filters in place to allow you to insert that
bit of html before and after the tables without having to directly modify the
code (so you can apply updates without losing your changes).
* ‘pta_sus_before_sheet_list_table’
‘pta_sus_after_sheet_list_table’ ‘pta_sus_before_user_signups_list_table’‘
pta_sus_after_user_signups_list_table’ ‘pta_sus_before_task_list’ ‘pta_sus_after_task_list’
* Those filters are right before/after the Table open/close tags, so you could
hook into those to return the open/close div you showed in your reply.
* In other words, you could add these 2 functions, with associated hooks, to your
theme’s functions.php file:
* ```
function pts_sus_scrolling_div_open($html) {
return '';
}
add_filter('pta_sus_before_sheet_list_table', 'pts_sus_scrolling_div_open');
add_filter('pta_sus_before_user_signups_list_table', 'pts_sus_scrolling_div_open');
add_filter('pta_sus_before_task_list', 'pts_sus_scrolling_div_open');
function pts_sus_scrolling_div_close($html) {
return '
';
}
add_filter('pta_sus_after_sheet_list_table', 'pts_sus_scrolling_div_close');
add_filter('pta_sus_after_user_signups_list_table', 'pts_sus_scrolling_div_close');
add_filter('pta_sus_after_task_list', 'pts_sus_scrolling_div_close');
```
Viewing 4 replies - 1 through 4 (of 4 total)
The topic ‘Formatting for iPhone’ is closed to new replies.
* 
* [Volunteer Sign Up Sheets](https://wordpress.org/plugins/pta-volunteer-sign-up-sheets/)
* [Frequently Asked Questions](https://wordpress.org/plugins/pta-volunteer-sign-up-sheets/#faq)
* [Support Threads](https://wordpress.org/support/plugin/pta-volunteer-sign-up-sheets/)
* [Active Topics](https://wordpress.org/support/plugin/pta-volunteer-sign-up-sheets/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/pta-volunteer-sign-up-sheets/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/pta-volunteer-sign-up-sheets/reviews/)
## Tags
* [format](https://wordpress.org/support/topic-tag/format/)
* [mobile](https://wordpress.org/support/topic-tag/mobile/)
* [size](https://wordpress.org/support/topic-tag/size/)
* [table](https://wordpress.org/support/topic-tag/table/)
* [width](https://wordpress.org/support/topic-tag/width/)
* 4 replies
* 2 participants
* Last reply from: [DBAR Productions](https://wordpress.org/support/users/dbar-productions/)
* Last activity: [11 years, 8 months ago](https://wordpress.org/support/topic/formatting-for-iphone/#post-5461258)
* Status: resolved