Outreach Theme – Mobile

[sgtaw]

Hi All!

Take a look at roseburgalliance.com on your mobile phone.

The home page doesn't look "mobile friendly".

However, the blog page does.

Any idea why it is like this and how to mobilize the entire site?

 

Thanks,

 

Ed

[heartattack247]

Hey Ed, the problem I believe you are seeing is that the video you have on the "Welcome!" page is that the video is not adjusting to a mobile size, am I right? If that is the issue you are referring to, you need to get your videos to behave properly with responsiveness.

This was an initial issue for me when switching TheRefugeCamp.com to the Outreach Theme due to the video on the homepage.

The fix to this was a great new plugin call "Fitvids for WordPress". You can simply search "Fitvids for WordPress" from your WordPress Dashboard under Plugins>Add New or you can download it directly from this link:

There was a small learning curve to getting this to work correctly, but it wasn't too bad.

Here are my Instructions as simple as I can explain them:

From your WordPress Dashboard go to Plugins>Add New
Search "Fitvids for WordPress"
Should be 1st on the list, currently version 2.1 (as of 03/02/2013), click "Install Now" and then click "Ok" when the box pops up.
After the plugin finishes installing, click "Activate Plugin".
Go to the FitVids settings page which will now be on your left-hand tool bar under Appearances >FitVids
Check the "Add jQuery 1.7.2 from Google CDN" box
In the "Enter jQuery Selector" box, type (or copy/paste) ".wrap"
In the "Enter FitVids Custom Selector" box, type (or copy/paste)"iframe[src^='https://maps.google.com/maps'], iframe[src^='https://www.google.com/calendar']"
Click "Save Changes" and you should be good to go.

A few notes:

This will for sure fix your video issue and make it responsive
This works decent with the embedded Google Maps iframe code
It doesn't seem to work very well at all with embedded Google Calendar (from my very quick testing). I set up a test page real quick (Click Here) and it does respond to manual browser width adjustment via desktop Chrome browser, but it gets pretty funky looking on the iPhone and doesn't look good at all and isn't remotely functional. (unlike the Google Maps, which is decent looking)

Here are a few websites I found helpful to understanding this plugin, how it works and what it does:

Developers Site:
http://fitvidsjs.com/

Developers Blog (w/ good video intructions):
http://css-tricks.com/video-screencasts/103-integrating-fitvids-js-into-wordpress/

Another Developers Blog (less helpful, but good information to understanding this progress of the solution) :
http://daverupert.com/2011/09/responsive-video-embeds-with-fitvids/

I hope this all helps for you to make some better progress. It will at least fix the video for sure and you can toy with other Map & Calendar solutions. I'm sure I will be diving into figuring out those issues myself in some near future Mobile Responsive builds.

[heartattack247]

(Delete, double posted...oops.)

[Author]

Posts