[SOLVED] Mobile View

Hey,

So I'm working on a mobile version of my site ( www.limerickreformed.com ).

Currently, the sermons table is a problem - it has too many columns to display neatly on a mobile device. I want that many columns for the desktop version, but I can't think of a way to specify less columns for only a certain page (in this case, a page used by the mobile site)? If I understand it correctly, currently the number of columns can only be determined system-wide in the SermonSpeaker Parameters.

Regards & keep up the GREAT work!

Are you using a special template for the mobile version? Then you could use template overrides to show less columns. Just copy the layout to the appropriate folder in your template directory and delete the columns you don't want.

Thanks!

Unfortunately I am not using a special template for mobile. I'm using the mobile feature of the Gantry framework. AFAIK it calls a template-mobile.css override as part of the normal (desktop) template, so it uses the same folder. I guess this is therefore a Gantry issue? Or is there a simple line to put into the template-mobile.css to delete some columns?

It shoudl also be possible using CSS:
Every table cell has at least one class assigned. And there is a unique container class for each view. You can use this to hide the cells you want using display:none. So if you want to hide the "scripture" and "hits" on the sermons listing you can use this CSS in your template-mobile.css:

It works perfectly! You're awesome!

Glad it worked :blush: