I have been searching the forums for an answer to this issue and so far have not found one.
Currently using Moodle 2.6 and the Clean theme.
The issue I am having is that my pages are scrolling horizontally on both the iPhone and iPad. I would not call this responsive but maybe I am wrong.
Interestingly I was able to get the logo to be responsive despite the fact that without css mods the logo is not responsive in Clean.
Our test moodle site url is http://www.mysticalmindtraininges.org
Any help or feedback would be much appreciated.
Further investigation suggests that the issue is with the tables I have created in each of the course lessons. The theme itself is indeed responsive but does not handle tables. Does anyone know how to make the tables responsive?
As a rule, they aren't (though you can use some css trickery to make them work). Have you tried just using alignment, or using the 'float' and 'max-width' css selectors?
Hi Allan
Thanks for the response. I am not quite sure what you mean by using the max width etc. I know a little about css and html. Could you point me in the right direction, like which files I would have to change or perhaps some steps to take.
The issue is I have a set of courses that last about two years and all the pages are built with table. I am really hoping to not have to re-write them all.
Any help you or anyone else could provide would be much appreciated.
I guess I am surprised that this hasn't been an issue with a lot of others using moodle given the movement towards responsive sites etc.
I found out what needs to be done to all tables and images to make them responsive. A shout out here to studentweb.stcloudstate.edu/nosh0502/ for posting - http://www.slideshare.net/nosh0502/best-practices-in-moodle-course-development. It was very helpful. To summarize, in order to have tables responsive and the images inside them the following must be added to the table and image properties:
Tables - table-layout: fixed; width: 100%;
also any <td references to width must be set to 100%
Images - max-width: 90%; min-width: 35%; height: auto;
If using JWPlayer and you want the player to be responsive use the following:
width: '100%',
aspectratio: "16:7" the aspect ratio can be anything you want 16:7 works for me
I now have to go through the html for 24+ courses and change the code to match the above.
If anyone knows an easier way....... I am all ears!!!!