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.
