Mobile

[Raj Vasa]

First, I want to say you have a great support! My question is on my normal website everything looks good. On the mobile version, it is a very stripped down version. Is there a way to have the regular version show up on mobiles? Also, if I wanted to keep the stripped down version of the mobile site, I want to find out what the best way to size contact forms or google maps to show up best in the mobile. Right now in the mobile version I have a contact us form, but the user has to scroll all the way to the right to press it. Is there some sort of max width I should be using?

[Bill Robbins]

Raj, great question. You can do that and I’ll be happy to show you how. Unfortunately a thunderstorm knocked out our Internet access this afternoon and I’m limited to my phone at the moment.

I’ll post the changes for you tomorrow once I have access again.

Thank you for your patience.

[Bill Robbins]

Raj,

Sorry again about the delay. Here’s what you’ll want to do:

1. Go to the Appearance section and select Edit.
2. From the list of files on your right, choose header.php and delete this line:

   
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   

3. Save your changes.
4. Next edit the style.css file and delete everything between this line:

   
   /* Tablet Layout: 768px */
   

   and this one:

   
   /* Internet Explorer Styles */
   

Save your changes.

That should make the site so that it is no loner responsive. If you have any questions or trouble, let me know,
Bill

[Raj Vasa]

Hi, thanks! I actually do want to keep it responsive but I was wondering what is the best way to deal with forms etc. Right now the form I have a contact form for my site (http://www.jpsloungedc.com) and when you look at in mobile the user has to scroll all the way to the right to get to the submit button. Also google maps is a bit too big. I was wondering what is the best way to size these forms so they can fit in smaller screens. Is there some sort of media query I should be doing for these forms ?

[Bill Robbins]

Raj,

Gotcha. It looks like that particular form plugin is using tables to generate the forms on the front of your site. The cells of those tables have inline styles that set the width. Because of that I won’t be possible to make them responsive as it’s not possible to override inline styles like that with a stylesheet.

If I could, I’d suggest using either Contact Form 7 or Visual Form Builder to create a form that’s more easily responsive too.

For the map, you can place this CSS snippet in the Custom CSS box that’s in the styling tab of the theme options page to keep it from being too big:

.page-content div.google-map-placeholder,
.page-content .cgmp-directions-hint {
	max-width: 100%;
}

Give that a try and see if it works better for you.

[Raj Vasa]

Hey Eric,

Hope you been well. I actually have a few more questions on this matter. The client I was developing this site for wants to use the regular webpage for the mobile because they want social media links visible (due to the fact many use mobile for social media especially instagram etc). I followed your advice on how to make the site unresponsive but now I have an issue with the image slideshow. On mobile, the images in the background are very small and do not take up the whole screen such as it does on a browser on a laptop / pc. Thus, when you zoom, the site zooms in while the picture stays the same size making it look like nothing is aligned etc. The website is jpsloungedc.com if you want to check it out yourself. Can you let me know what I can do to fix this on the mobile version?

My second question is if I wanted to change the mobile responsive site around i.e. add social media links and some other things, how would I go about adding those changes only to the mobile site. I know in joomla you add something to the Module Class Suffix for that module etc to only show up on screens a certain size or small or bigger.

Thanks for your help in advance!

[Bill Robbins]

Here’s two things I would suggest.

If the only reason to make it non-responsive is to have the social icons, then use a plugin to add a social icon widget. That would give you links to your social networks without having to remove the responsive parts of the theme.

The other item I would suggest is updating to the current version of the theme. It has a number of fixes and in particular, the background images work much better on mobile devices. You can pick it up from the downloads section of the support site here.

Hope that helps out. Let me know if you need anything.

Bill

[Raj Vasa]

Bill,
I upgraded to your new version thanks.

So what I am trying to figure out is if there is a way to add a widget etc only to the mobile responsive version and to the whole site? The regular site has the social media links but the scaled down version takes it out. What would I need to do to make it so the scaled down version also has it? If I install the widget won’t it show up on all versions of the site? Also, is there a way to make a menu item that will only show up on mobile scaled down versions? Is there a way to eliminate forms for the mobile version but still show on the regular version? If you take a look at my mobile version the contact form is really out of place now.

[Bill Robbins]

Raj,

Glad you found the update. Let’s try this. Go to the Theme Options page and select the Styling tab. Scroll down to the Custom CSS box and paste this:

@media only screen and (max-width: 767px) {
	
	header#primary,
	.header-content {
		display: block;
		width: 100%;
		position: relative;
	}


	#content form.fm-form ul {
		margin: 0;
	}
	
	#content form.fm-form table {
		max-width: 100%;
	}
	
	#content form.fm-form table td {
		max-width: 150px;
	}
	
	#content form.fm-form table td input,
	#content form.fm-form table td textarea {
		max-width: 100%;
	}
	
}

See if that won’t make your social icons visible on mobile devices and help your contact form too. You might consider switching to a contact form that is made to be responsive (this one isn’t).

Hope that helps out,
Bill

[NOBA]

Bill, on a similar note, the Google Maps plugin I am using on joinnoba.com/our-local-churches/ seems unresponsive. Is this the same issue? Is there another plugin that you would suggest besides Google Maps? This function is vital for this site.

[Bill Robbins]

Alex,

The map itself is straightforward to make responsive. Here’s what to do there:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   .wpgmza_map {
   	max-width: 100%;
   }
   

3. Update your settings.

The bad news is, the table below it has a width set in the actual code of the table (it's an inline style). That can't be overridden by anything we place in the custom styling. The only way to alter that is by changing the inline style itself.

Do you know if the plugin settings allow you to change the width. Could you use a % based width like 100% instead of a width in pixels?

It make a nice list, so I'd hate for you to lose that since it seems to be a great fit for you what you need.

Let me know what you turn up there,
Bill

[Charlotte Shockey]

I am actually having an issue (as far as I know just on the iPhone) that the only nav option for the mobile version of the website is Home. Doesn’t give me any of the other menu options. Help?! 🙂 Thanks!

[Bill Robbins]

Charlotte,

Sorry for the trouble. Any chance you could send a link to where you’re working with it so I can take a look for you?

Thanks,
Bill

[Charlotte Shockey]

http://kos.shockrina.com

Thanks! 🙂

[Bill Robbins]

Anytime. Let me know if you need anything else.

[Charlotte Shockey]

Did you get it figured out?

[Bill Robbins]

Sorry. Yes, here’s what’s up.

There is a conflict in WordPress 3.6 and our image lightbox. That’s actually what’s keeping the mobile navigation from showing up for you.

There is an update to the theme that you can use. To make the update, in your WordPress control panel click on the “Home” link in the top left. The updates section will be visible there.

The theme updates will be down below any plugin updates that you have available at the moment.

Once you update your theme and refresh your browser on the front of your site, that should take care of it for you.

If you run into any trouble, let me know,
Bill

[Author]

Posts