• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Food + drink
    • Cocktails + soft drinks
    • Breakfast + lunch
    • Easy-ish healthy dinners
    • Party food + weekend projects
    • Dessert
    • Everything!
  • Work + career
    • beautiful web design
    • Food blogging tutorials
    • Freelancing and business
  • ABOUT
    • CONTACT
    • About
    • Privacy Policy
  • Portfolio

Delicious from scratch

fine vegetarian recipes

By Nancy Anne Harbord 59 Comments

Foodie Pro theme tutorial: disable mobile theme

Mobile View 2
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.

Come and say hello on instagram ✋

Follow

Reader Interactions

    Cancel reply

    Your email address will not be published. Required fields are marked *

    CommentLuv badgeShow more posts

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Keren @ Just One More Spoon says

    13th October 2014 at 1:06 pm

    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.

    Reply
    • Ramsons and Bramble says

      13th October 2014 at 4:26 pm

      Hey Keren! Sorry to hear about your frustration – I know the feeling well! Are you using Foodie or Foodie Pro?

      Reply
  2. Holly says

    26th November 2014 at 8:32 pm

    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!!

    Reply
    • Nancy | Ramsons and Bramble says

      26th November 2014 at 8:46 pm

      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!

      Reply
      • Holly says

        12th December 2014 at 12:43 am

        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!

        Reply
        • Nancy | Ramsons and Bramble says

          12th December 2014 at 12:34 pm

          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!

          Reply
        • Sarah says

          27th June 2015 at 10:23 pm

          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

          Reply
  3. Lisa says

    29th November 2014 at 3:54 pm

    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!

    Reply
    • Nancy | Ramsons and Bramble says

      29th November 2014 at 10:24 pm

      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!

      Reply
  4. Ann says

    5th December 2014 at 5:07 pm

    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!

    Reply
    • Nancy | Ramsons and Bramble says

      5th December 2014 at 9:28 pm

      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

      Reply
  5. Priya says

    8th December 2014 at 7:58 pm

    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?

    Reply
    • Nancy | Ramsons and Bramble says

      8th December 2014 at 8:02 pm

      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.

      Reply
  6. Priya says

    8th December 2014 at 8:09 pm

    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.

    Reply
    • Nancy | Ramsons and Bramble says

      8th December 2014 at 8:23 pm

      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.

      Reply
  7. Priya says

    8th December 2014 at 8:58 pm

    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?

    Reply
    • Nancy | Ramsons and Bramble says

      8th December 2014 at 9:06 pm

      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.

      Reply
  8. Priya says

    8th December 2014 at 9:04 pm

    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!

    Reply
    • Nancy | Ramsons and Bramble says

      8th December 2014 at 9:07 pm

      I am extremely glad to hear that! I was feeling panicked right there with you!

      Yeah!

      Reply
  9. Ann says

    10th December 2014 at 3:18 am

    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?

    Reply
    • Nancy | Ramsons and Bramble says

      10th December 2014 at 8:38 am

      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!

      Reply
      • Lisa @ Sugar Free Low Carb Recipes says

        10th December 2014 at 1:23 pm

        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

        Reply
        • Nancy | Ramsons and Bramble says

          10th December 2014 at 2:13 pm

          Hey Lisa! Welcome!

          I have posted that sidebar code in reply to the previous comment if you’re still interested.

          Reply
    • Nancy | Ramsons and Bramble says

      10th December 2014 at 8:46 am

      Sorry, I just saw that you said you did change your site back for now!

      Reply
    • Nancy | Ramsons and Bramble says

      10th December 2014 at 2:12 pm

      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!

      Reply
  10. Josh says

    5th January 2015 at 10:02 pm

    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?

    Reply
    • Nancy | Ramsons and Bramble says

      7th January 2015 at 5:14 pm

      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!

      Reply
      • Josh says

        16th January 2015 at 4:35 pm

        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!

        Reply
        • Nancy | Ramsons and Bramble says

          17th January 2015 at 9:53 pm

          Hey Josh!

          Sorry to hear that didn’t work. But I’m glad I could help you find some kind of solution!

          Thanks!

          Reply
  11. April Decheine says

    8th January 2015 at 4:12 pm

    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!

    Reply
    • Nancy | Ramsons and Bramble says

      8th January 2015 at 4:57 pm

      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!

      Reply
      • April Decheine says

        13th January 2015 at 1:36 pm

        It worked, NICE! Thank you!!

        Reply
  12. Jessica @ Sprinkle Some Sugar says

    23rd January 2015 at 3:43 am

    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

    Reply
    • Nancy | Ramsons and Bramble says

      23rd January 2015 at 10:18 am

      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.

      Reply
    • Nancy | Ramsons and Bramble says

      23rd January 2015 at 10:19 am

      By the way, not a dumb question at all!

      Reply
  13. Katherine says

    6th March 2015 at 6:28 am

    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!

    Reply
    • Nancy | Ramsons and Bramble says

      14th March 2015 at 6:57 pm

      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!

      Reply
  14. Savanna @ Gluten Free Vegan Pantry says

    6th April 2015 at 7:57 pm

    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…

    Reply
    • Nancy | Ramsons and Bramble says

      27th April 2015 at 6:16 pm

      Hey Savanna – glad to hear it worked for you.

      Always a delight to hear from people who have used my tutorials!

      Reply
  15. Laura says

    18th April 2015 at 5:27 am

    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!

    Reply
    • Nancy | Ramsons and Bramble says

      27th April 2015 at 6:08 pm

      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.

      Reply
  16. Sarah says

    18th April 2015 at 11:59 pm

    This doesn’t work. I’m very frustrated 🙁

    Reply
    • Nancy | Ramsons and Bramble says

      27th April 2015 at 6:07 pm

      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?

      Reply
  17. Laura says

    29th April 2015 at 3:59 pm

    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. 🙁

    Reply
    • Nancy | Ramsons and Bramble says

      20th May 2015 at 9:59 pm

      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!

      Reply
  18. quinty says

    14th June 2015 at 4:03 pm

    I can not find a site-container what now?

    Reply
    • Nancy | Ramsons and Bramble says

      28th June 2015 at 12:22 pm

      Hi Quinty,

      I think if you can’t find the site-container, you’re probably looking in the wrong place!

      Reply
  19. Sarah says

    1st July 2015 at 1:57 am

    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!

    Reply
    • Nancy | Ramsons and Bramble says

      10th July 2015 at 7:58 pm

      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!

      Reply
  20. Greg @ Full of Beans says

    14th July 2015 at 2:12 am

    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

    Reply
    • Nancy | Ramsons and Bramble says

      14th July 2015 at 5:19 pm

      Sorry Greg! That is way past my knowledge level!

      Reply
  21. Mike says

    22nd August 2015 at 7:48 am

    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?

    Reply
    • Nancy | Ramsons and Bramble says

      4th September 2015 at 7:33 pm

      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?

      Reply
  22. Marci Loehner says

    17th November 2015 at 8:07 pm

    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 😉

    Reply
    • Nancy | Ramsons and Bramble says

      18th November 2015 at 11:41 am

      Fantastic Marci, it’s great to hear you were successful!

      Reply
  23. Christina @ The Beautiful Balance says

    24th January 2016 at 4:29 am

    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.

    Reply
    • Nancy | Ramsons and Bramble says

      10th February 2016 at 7:33 pm

      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!

      Reply
  24. Leilani says

    25th April 2016 at 7:42 pm

    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! 🙂

    Reply
  25. Tash Shan says

    8th November 2016 at 12:28 pm

    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.

    Reply

Primary Sidebar

Favourite tools

Best Pepper Mill - Cole and Mason Precision Gourmet Pepper Grinder

Copyright © 2013-2018 - Theme by Shay Bocks - Decorated by Nancy Anne Harbord - Contact