Removing Mobile Responsive Coding from Dinosaur Stew Child Themes

All Dinosaur Stew themes are mobile responsive, meaning your theme is designed to look differently on mobile devices than on desktop versions. Because so many users access websites via their mobile devices, it’s super important to have a mobile-friendly version in place. If your website isn’t mobile responsive, Google can actually penalize you, which affects your ranking in search results.

That being said, you can remove the mobile coding if you do not want your website to be mobile responsive, but we don’t recommend it! If you do decide to remove the mobile responsive coding, be warned that your placement in search results may be negatively affected.

---

How to Remove Mobile Responsive Coding From Your Theme:

Warning: You will need to edit two of the theme’s main theme files: style.css and functions.php. Please note that a mistake while editing these files could produce nasty results, so please back up original copies of each file before you start–and make sure you feel comfortable editing a bit of code! We highly recommending knowing how to access your site’s files via FTP or Control Panel File Manager so you have the ability to restore your files if something goes amiss in the WordPress editor.

Editing functions.php

1. In your WordPress dashboard, go to Appearance >> Editor and ensure you are editing the functions.php file
2. Find the following code:

   /** Add Viewport meta tag for mobile browsers */
   add_action( 'genesis_meta', 'add_viewport_meta_tag' );
   function add_viewport_meta_tag() {
       echo '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>';
   }
   

3. Comment out the above code (replace it with the following):

   /** Add Viewport meta tag for mobile browsers */
   /** add_action( 'genesis_meta', 'add_viewport_meta_tag' );
   function add_viewport_meta_tag() {
       echo '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>';
   } */
   

4. Save the file

Editing style.css

1. Now, go to Appearance >> Editor and edit the style.css file
2. Search for “Responsive Design” or “Media Queries”. There will be two instances of this; find the second one at the end of the file.
3. Select the entire section — it will usually go to the end of the file–and delete the selection. Alternatively, you can comment out each part, similar to how you did above, but it takes longer.
   

4. Control + F and search “max-width”. Change every one you find that has a px value after it to just “width”. For example:

   You find: max-width: 1152px;
   Change to: width: 1152px;