Table truncated on mobile using WpTouch

example https://gt-scuderia.net/2013/04/11/daytona-challenger-il-17042013/
try to see it on mobile.

Tables often use fixed dimensions. By definition, fixed dimensions override any scaling capabilities of iOS or WPtouch. Choose to use flexible dimensions whenever possible to allow page elements to resize for various mobile screen sizes. If you are unable to change these dimensions at their source, you may add custom styling in the Stats & Custom Code area of your WPtouch admin panel. (In your case, the table widths appear to be set inline). The tool tip there will give you additional information if you want to use a stylesheet otherwise simply include your custom CSS inside style tags.

Could you advice a sample code to add into Stats & Custom Code area of WPtouch panel to to use flexible dimensions ?

I’m sorry … but I have no idea how change the flexible dimensions at the source and what code I can use in WPtouch.

Thank you very much, looking forward to your reply.

Angel

In general, fixed dimensions are, for example, width: 600px. Flexible dimensions are expressed as width: 100%. Depending how your tables are created, you may be able to change these in an admin area where you choose the size of the fields. If not, you may be able to override the dimensions by adding the percentage-based styles to WPtouch as instructed above.

You can preview your mobile theme in a desktop browser by using Safari and activating its developer functions. Then you may use Safari’s browser inspector to locate the specific styling selectors for your table.

The free version of WPtouch was not designed to allow this kind of styling flexibility and customization within its admin options but we are able to provide you with ways you can achieve your layout goals while still using the free product.

Hello,

Great plugin it’s working good.

But a minor problem i am facing is to increase the width of the page in mobile is it possible to do so. If yes please help me with your suggestions.

What do you mean by increase the width of the page?

I am having the same problem but unfortunately changing the values to percentages makes no difference. This because of the way tables work: the minimum width a cell occupies always depends on the content of the cell itself. A word or image within the cell will push the width of the cell regardless what initial value you give it. And because table columns will always display next to each other rather than collapse down (as floated DIVs would) any table with more than a few columns will always spill over the right side of the screen.
This is not fixable and in my opinion it’s a major flaw of this plugin and mobile plugins in general.
Tables are bad for layouts but very useful (and completely acceptable) for displaying certain types of information: lists of prices, products and so on. Many websites use hundreds of tables, so expecting webmasters to go and turn all of these tables into systems of nested floated DIVs is just not practical.
The plugin should have an overflow system for tables, i.e. when a table overspills the content, users at least get horizontal scrollbars so they can see the rest of the table.
Would this be hard to implement? A good plugin needs to fit as many scenarios as possible and “retro-fit” existing websites rather than creating extra problems.

Well, I solved this problem by changing the Bauhaus theme’s style.css file. If anyone is interested, these are the modifications I had to make in wp-content/plugins/wptouch/themes/bauhaus/default/style.css:

body { background-color: #f9f9f8 !important; }

This should match the colour you pick for the body background in the plugin’s settings. For some strange reason the body gets given an inline style to match the header’s background, so you have to override that or you get the wrong background when scrolling to the right. Then find:

.post-page-content {
	color: rgba(0,0,0,.7);
	font-size: 100%;
	line-height: 165%;
	padding-bottom: 50px;
}

so remove overflow: hidden from there.

I also removed max-width: 100% from .post-page-content table but I don’t know if that had anything to do with it.

I can now scroll to the right if the table overflows, and the rest of the layout seems unaffected.

The plugin’s authors mention “you may add custom styling in the Stats & Custom Code area of your WPtouch admin panel” so perhaps it would be best to enter the modified CSS code there rather than modifying the plugin’s files. Either way this seems to do the trick.

Keep in mind that all core code is replaced on each update. It is recommended to use a copied child theme for any customization of the mobile theme.