This Foodie Pro theme tutorial is a step-by-step guide on how to disable the theme's mobile responsiveness - and explains why you might want to!
This edit took me soooooooooo long to work out that I absolutely had to share it with someone else. I decided that I wanted to remove the mobile responsiveness from my Genesis child theme, Foodie Pro. I know there are many, many solid arguments for having a fully responsive theme, but I just didn't really like the way it looked and the way it took all my beautiful (hopefully!) website styling and structure and reduced it down to just the logo and a narrow strip of images and text.
I also noticed that Oh My Veggies was using a non-responsive version of the Foodie Pro theme (I'm not sure if she's upgraded to Foodie Pro) for mobiles, so I contacted Kiersten Frase to ask why. She pointed out that having the sidebar display at the very bottom of all the other content has a negative impact on display advertising revenues as well. As I was in the process of implementing such advertising on my blog, this seemed like an important consideration. So I went for it.
I had BIG problems getting my background image to display in the right place when viewed on a mobile and it literally drove me crazy for almost two weeks. In the end, it was assistance from this fantastic website that got me on the right track. I had tried a huge number of micro changes and edits up to that point in both my Style.css and Functions.php files and seemed to be able to move just about every other part of the webpage except the part that I wanted. When I finally got it (it was the width setting in the new addition to the Functions.php file that I was getting wrong), I was at last able to get back to the all-important job of writing actual content and get a good, calm, restful night's sleep!
I hope this helps someone avoid that horror.
I use the program TextWrangler to edit my theme files. It enables you to open, edit and save the files remotely using your FTP login credentials (I found mine in my 1&1 hosting dashboard). If I make a mistake, I can just 'undo' the action and save again to return things to their previous state. I will point out that if you want to save yourself potential trouble, you should create a backup of the entire file you are working on so you can restore it if merely undoing the action goes wrong, but I haven't personally had to resort to that yet.
On to the code!
Remove this code from your Style.css file:
Find this code in your Style.css file:
And change it to this in your Style.css file:
Remove this from your Functions.php file:
And add this instead to your Functions.php file:
Ta da! Now, for better or for worse (you decide) you should see exactly the same version of your website on mobiles and tablets that you see on your desktop.
If you are looking for information about how to make other edits to this theme or to your Genesis site in general, check out my other Foodie Pro tutorials.
Interesting post! I also use foodie theme and I'm pulling my hair trying to make the header text to align left! The css code didn't work 🙁 You're way more advance than me.
Hey Keren! Sorry to hear about your frustration - I know the feeling well! Are you using Foodie or Foodie Pro?
Hi There! This was sooooo helpful when I found your post! I deleted and replaced the respective coding in your post and it appeared that disabling my mobile theme had been a success. However, two things that perhaps you could help me with--1. My husband uses a Samsung Galaxy, and I an iphone. When I visited my site from my iphone, it appeared fully responsive, but my husband's Galaxy appeared to be back to the mobile version. Any idea why? 2. After a few days of my site appearing fully responsive via my iphone, it reverted back to the previous mobile responsive view. Have you had this issue? Thank you so much!!
Hello there Holly!
Very strange! When I checked your site on my laptop and on my iPad, it was displaying correctly - the full site, not the mobile version. But when I checked on my iPhone, it appeared to be a completely different theme. Is this happening for you?
I can't imagine why this would be happening, other than perhaps somehow you have old theme files somewhere they shouldn't be? Did you change to Foodie Pro recently? If so, perhaps try deleting your old theme (you could use FTP to copy it onto your desktop in case you want it again in the future).
To be honest, I'm stumped! I'm relieved to say that this hasn't happened to me!
Hello again!
I just wanted to drop by and post the resolution to my issue in case anyone else was struggling with the same thing:)
Of course, it was an easy fix that caused weeks of frustration 🙂 All I had to do was disable my jetpack mobile theme and, tada! fixed! My full site is now what mobile viewers see. Hooray!
Happy Blogging and thanks again!
Hi Holly!
I am sooo pleased you found a solution! I had been wondering whether it was a plugin causing conflict.
Thank you for letting us know!
Holly, I was having that same problem and couldn't find the solution anywhere! Thank you!
And Nancy, thanks so much for these great tutorials!!
Sarah
Thank you so much for posting your tutorials on how to customize the Foodie Pro theme. I just updated my site to the theme and was looking on how to fix the mobile issue with ads at bottom. You saved me tons of research. I just bookmarked to read later. Will attempt a few of your other tweaks as well. Thanks again for sharing!
Hello Lisa!
Really glad to hear you find the tutorials useful. I had no idea when I wrote them that I would get such a big response from other bloggers. It's been really great to help with something that gave me immense joy and frustration when I was working on it.
If you get stuck with your tweaks I'm happy to try and help!
Thanks so much for posting this! I have been fussing around with my mobile theme for months, unhappy with the way things were lining up. Disabling the mobile theme entirely was totally the way to go. Thanks again!
Hey Anne!
No problem! I nearly tore my hair out for three weeks trying to sort out the mobile issue. It was the most frustrating tech issue I've had so far. In fact, it was why I ended up writing the tutorials - it took such effort to work out that I absolutely had to share it with someone else.
Great to hear it was useful for you
Hi Nancy. I updated the code exactly as you described. I updated the CSS file without a problem. And then I made the changes to the PHP file, clicked update and my screen went blank. Now, my website does not show up at all - I can't access the website or the admin-login page. Have you heard of this happening? Do you know what the problem might be?
Hi Priya!
Very sorry to hear that! I haven't heard of this problem from anyone else so far. How are you making the edits? If you are using a program like Text Wrangler which accesses your website files via FTP you should just be able to 'undo' the last change/changes.
I was using the built-in editor in the dashboard. But now I can't access the site or the dashboard and I don't know how to login either.
Hi Priya,
It's best not to use the dashboard editor for exactly this reason. But don't panic! You should be able to access the files using FTP. I recommend that you download the program Text Wrangler I mentioned in the post. You then need to go to your hosting company's website and find out your FTP login details. Then open Text Wrangler and choose File/Open from FTP and put in your FTP login details. You should then see a list of your WordPress files which you can open and edit in the program. Open the last file you edited and delete the changes you made. If you don't know which folders to open to find the functions file, I can point you in the right direction.
Thank you. Yes, I put that on my To Do list but obviously should have done that sooner. TextWrangler is not available to Windows users so I have installed Filezilla. Can I take you up on your offer? How do I locate the functions.php file?
Filezilla will help you access the files, but it won't be able to edit them. If you have a back-up of the file you edited before you edited it, you can just transfer it over with Filezilla. If not, you'll still need to find a program to open and edit the file with - here are some options
To find the file, either to copy it onto your desktop or to open it through another program, open the folder that contains all your blog files. Mine is called BLOG, but yours will be whatever you named it. After that, this is the path:
wp-content/themes/foodiepro - the functions.php file should be in there.
I spoke too soon. I played around further and found it.
I edited the file, inserted that stray } at the end, and my website is up and running AND looks great on my mobile device. Thank you for your technical and emotional support!
I am extremely glad to hear that! I was feeling panicked right there with you!
Yeah!
Ack - of course I spoke to soon! As soon as I implemented the changes you recommended above, the sidebar on my desktop version of my blog started looking way too narrow (the ads were bleeding over onto the background image space). I changed my site back to my original version for now. Any thoughts on what I need to change in my code to make my sidebar wider to accommodate my ads once I implement your changes?
Hey Anne!
Did you change it back to mobile view? I can't see the issue on your site at the moment.
I do know how to enlarge the sidebar, but I'm at work at the moment and don't have the code in front of me. I widened my sidebar a while after I disabled the mobile theme so it could accommodate two skyscraper adverts next to each other. It still displays correctly on mobile, but as I haven't had the same issue as you, I can't say for sure it will fix your issue.
Worth a try though - just make sure you use a code editor rather than the dashboard editorin case anything goes wrong. Code on its way in a few hours!
Nancy, I haven't had time to try this change to my site yet, but would like to know how you widened the sidebar if you have a moment. Thanks again for posting this great info. ~ Lisa
Hey Lisa! Welcome!
I have posted that sidebar code in reply to the previous comment if you're still interested.
Sorry, I just saw that you said you did change your site back for now!
Here is the code! To change the sidebar, I found this code in the style.css file:
.sidebar-primary {
float: right;
width: 300px;
}
And changed it to this:
.sidebar-primary {
float: right;
width: 330px;
}
I added an extra 30px to accommodate two skyscrapers next to each other, and also to add a little gap between them. You can change the width to whatever you need.
You can also change the width of the content area to reflect these changes, but as Foodie Pro has quite a large gap between the content and the sidebar, I decided to leave it as it is. Bear in mind that if you do decide to enlarge the content area and you have been sizing your photos to fit the 680px width, they will be a bit too small now. It doesn't matter so much if you shrink the content area a little as the photos will display the same. But for anyone who's interested, here's the code for the content area:
.content {
float: right;
width: 680px;
}
Hope this helps!
Your tutorials are just incredibly helpful (and impressive)! Thank you!
Question for you about editing the mobile theme, if that's something you could comment on. I'd like to edit the mobile theme so that the Foodie Pro Featured Posts widget after post entries (and on the home page) displays thumbnails smaller instead of full-width like it's doing now. The way it's displaying now, it's over-enlarging thumbnails, which makes them pixilated and is destroying my brain.
Can you help there?
Hi Josh!
I'm sorry, I don't really have any insight into editing the mobile theme, as I just deleted it for my site. I had a look at your site on my iPhone and I can see the pixelation on the featured posts. Have you changed to this theme recently? If so, perhaps try running the "Regenerate Thumbnails" plugin, as this can help with image sizing issues when switching between themes. The pictures would still be full width, but they should be in focus.
Let me know if that helps!
Well darn. I tried the Regenerate Thumbnails plugin idea and that didn't do it. I think I'm probably going to just delete the mobile theme like you describe here.
Thanks a lot for the help--such a great blog!
Hey Josh!
Sorry to hear that didn't work. But I'm glad I could help you find some kind of solution!
Thanks!
I am going to get this done today, I can just download those files, then edit them in my Cpanel, right? Then if something goes wrong, just upload them and overwrite the bad file?
Thank you!
Hi April!
I haven't used Cpanel before, but if it lets you work on the files in question and upload them, then overwrite them with the backup if something goes wrong, it will be great. Good luck!
It worked, NICE! Thank you!!
This is probably a dumb question, but would this tutorial work for the old foodie theme? Every time I try to upload to the new foodie pro, something goes wrong so I just totally give up. Lol
Hi Jessica!
I haven't tried it with the old theme and it won't be exactly the same, but it will be pretty similar. You could give it a try - of course after properly backing up the original files so you can go back to where you started if it goes wrong. Definitely don't use the WordPress code editor as it's hard to undo any changes made there.
I do think that you should persevere with the new theme though. What happens when you try to change to the new one? I think fixing that is well within the scope of either Foodie Pro or Studiopress support. There are a lot more fun options to play with when building your site with the new theme.
By the way, not a dumb question at all!
These tutorials are amazingly helpful!!
Thanks for putting together such detailed guides.
I recently set up a recipe archive but I was wondering how to insert a specific category of posts into a separate page on my menu (similar to how you have a recipe archive but your various travel pages contain archived content specific to a certain category.) I can't seem to add widgets to any pages except the "Home" "Recipes""Footer" and "Sidebar" pages.
Any advice would be wonderful, thanks Nancy!
Hi Katherine!
Apologies for the delay in replying, I've been super busy (and lazy!) and have neglected my duties here a bit! To achieve what I did with the travel section, you don't have to create a separate page. When you go into your navigation section (Appearance/Menus) on the left you should see different types of content that you can put in your navigation, namely Pages, Posts, Links and Categories. Click on Categories if you need to expand it, click on View All so you can see all the categories available, then select the check box of the category you want added and press Add To Menu.
In my navigation menu I have a general Travel category that I have labelled all such content with, and I also have country-specific categories. I added all these categories to the menu, then arranged the countries as sub-menu items. So when you click on Travel, you see all the posts I have written that relate to travel - there is no page actually created, WordPress just displays it looking like a page.
If you want your posts to display in a grid like I have, so they look the same as the widgets, you need to set that in your Content Archives. Shay has her own tutorial on how to do this if you're not sure:
Does that all make sense? Let me know how it goes!
Your tutorials are so, so helpful! Thank you so much for taking the time to share these! I just followed this tutorial to disable my mobile theme and it worked like a charm. Should help out with my ad viewability. Next up: trying to add my leaderboard in line with my logo...
Hey Savanna - glad to hear it worked for you.
Always a delight to hear from people who have used my tutorials!
First, I just want to say thank you for your incredibly helpful tutorials on foodie pro! I have used several of them before and really appreciate you putting your knowledge out there for all of us attempting to do the same thing!
Before I edit my css, I want to make sure I understand what parts to remove. I am not getting rid of all of the media queries, right? I am leaving all of the ones under 1000px? Won't this still keep the mobile mode enabled though? Just want to make sure!
Thanks so much!
Hi Laura!
My apologies for the late reply, I've been mega busy and sadly dragged away from my blog of late. I think your question is addressed in the instructions, but off the top of my head, you would remove all of the media queries.
This doesn't work. I'm very frustrated 🙁
Hi Sarah!
Sorry you're having problems - the code works my end and has also worked for many commenters, so perhaps it's some issue specific to your site?
I'm sure you already know, but I decided not to switch my mobile site off because I just received a notification on Google Adsense that Google is updating its search results for mobile and if your site is not mobile responsive it will rank lower. 🙁
Hey Laura,
I heard about the new algorithm, but I decided to see what happened, before switching back to the responsive site. So far my traffic has actually gone up, so I'm leaving it for now. Will keep you updated!
I can not find a site-container what now?
Hi Quinty,
I think if you can't find the site-container, you're probably looking in the wrong place!
Thank you so much for this! I experienced the white screen of death last week and have been to scared to go back to the codes since. But I used Text Wrangler as you suggested and everything went perfectly! This tutorial is great!
Hey Sarah!
Agghhhh, the white screen of death. Just thinking about it turns my stomach. Text Wrangler really is the way to go! Good luck with your edits!
Hi Nancy,
Great tutorial - thank you for offering your knowledge like this. It is clearly a big time-saver for lots and lots of people!
I have a slightly different thing that I am trying to do. This is on the site of a fellow blogger, not ours, btw. I am trying to keep the desktop and the tablet (both horizontal and vert) layouts the same. So, essentially turning it off for tablets. THEN, I want to make the tablet vertical to be the view for the iPhone. I tried moving the 940px width (iPad vertical) to the 767 and 420 width, but it doesn't work exactly. Seems OK at tablet size (sort of) but things are just not working well at mobile.
I also have no idea what sort of changes this might mean for the edits on the function.php file.
Any ideas about where to start with this?
Thanks!
Greg
Sorry Greg! That is way past my knowledge level!
I had implemented this on my site but tried to reverse it and it is not working -- still remains non-responsive...cleared caches, cookies, opened in private browsers, etc. Any suggestions?
Hi Mike,
Sorry, I'm not really able to help - I have never tried to reverse it. If you put all the code back exactly as it was before, I can't think of any reason why it wouldn't work. Could you reinstall those theme files or have you made a lot of changes that would be overwritten?
Thank you so much for this! I've been trying for MONTHS to get my mobile version monetized and it just wasn't happening. Not to mention my custom headers was all outta whack! It's perfect now 😉
Fantastic Marci, it's great to hear you were successful!
I followed this tutorial to the T and it removed the white overlay background from my layout. I have printed background and on top of that was a white overlay so that the text and images would show through more. I can not figure out for the life of me how to fix this and I added in the original coding and it won't go back. Ugh!
The tutorial worked, except for this. Now I'm racking my brain and Google trying to figure out how to fix it.
Hello Cristina,
I'm not quite sure what has disappeared, but I can't think of a reason why this edit would make affect the background. You should be able to go back to the original code – if you didn't use a program like Text Wrangler which lets you 'undo' changes you aren't happy with, then you might need to upload a new copy of the theme to remove your edits. Be careful if you have made a lot of other style.css edits, as re-uploading the theme will wipe them out.
Good luck!
HUGS AND KISSES TO YOU!!!!! I discovered this tutorial today and with sweaty palms followed it to a T. It worked! Thanks so much for empowering bloggers! 🙂
Thanks for making that super easy and painless! I can't say I was ever obsessed with removing mobile responsiveness but your explanation did make a lot of sense. Your instructions were so easy that I did it to see if I like it and I did! Plus I think it makes much more sense - especially with how large our mobile screens are these days.