Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

How To make Atahualpa pass Google's 'Mobile-Friendly Test'


  #1  
Old Apr 20, 2015, 05:22 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
How To make Atahualpa pass Google's 'Mobile-Friendly Test'

To get your Atahualpa site pass the Google 'Mobile-Friendly Test' do the following. This will make your site mobile friendly. If you don't pass the test after doing this - disable ALL your plugins and test again to see if a plugin is causing the issue.

1) go to ATO->Style & configure LAYOUT->Layout WIDTH and type (FLUID or FIXED) and set it to a percentage (as opposed to a 'fixed' width) then set the 'Layout MIN width' option to 320 (iPhone 4 size) or remove it altogether.

2) add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Header
HTML Code:
<meta name=viewport content="width=device-width, initial-scale=1">
3) add the following to ATO->HTML Inserts: Body Tag
HTML Code:
onresize="OnResizeDocument()"
4) Add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Body Bottom
HTML Code:
<script>
jQuery(document).ready(function($) {
    if( $(window).width() < 768 ) {
        // If any left sidebar exists
        if ( $('#left').length || $('#left-inner').length ) {   
            $("#middle").detach().prependTo('#bodyrow'); 
        }
    }
});
</script>
<script type="text/javascript">
        function OnResizeDocument () {
 if( window.innerWidth < 767 ) {
    jQuery(function($) {
              $("#middle").detach().prependTo('#bodyrow'); 
           });
        }
if( window.innerWidth > 767 ) {
    jQuery(function($) {
            $("#left").detach().prependTo('#bodyrow'); 
          });
        }
    }
    </script>
5) add the following to ATO->Add HTML/CSS Inserts->CSS Inserts
HTML Code:
@media only screen and (max-width: 767px) {
    table#layout,
    table#layout > tbody,
    table#layout > tbody > tr,
    table#layout > tbody > tr > td,
    table#layout > tr,
    table#layout > tr > td,
    table#layout td#header,
    table#layout td#left,
    table#layout td#left-inner,
    table#layout td#middle,
    table#layout td#right,
    table#layout td#right-inner,
    table#layout td#footer {
        display: block;
    }
    table#layout > colgroup {
        display: none;
    }
    div#wrapper,
    td#middle {
        width: auto;
    }
}
.hentry img { 
    max-width: 100%;    
    height: auto !important; 
    display: block !important; 
}
Note: in steps 4 and 5 you can adjust the number (767) to suit your choice.

Thanks to Flynn, sawyerjw, yukoner, kayphoonstar and extremecarver for their contributions.

3/28/18 NOTE: It seems that Andriod devices have an issue when using this code and trying to enter data using the virtual keyboard. The virtual keyboard will pop-up and then vanish. This can be corrected by replacing the 'HTML Inserts: Body Bottom' from above with
HTML Code:
<script>
jQuery(document).ready(function($) {
    if( $(window).width() < 768 ) {
        // If any left sidebar exists
        if ( $('#left').length || $('#left-inner').length ) {   
            $("#middle").detach().prependTo('#bodyrow'); 
        }
    }
});
</script>

<script type="text/javascript">

  function OnResizeDocument () {
    if( window.innerWidth < 767 ) {
  //    jQuery(function($) {$("#middle").detach().prependTo('#bodyrow'); } );
    }
    if( window.innerWidth > 767 ) {
      jQuery(function($) {$("#left").detach().prependTo('#bodyrow');   } );
    }
  }
</script>
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Mar 28, 2018 at 04:43 AM.
  #2  
Old Apr 20, 2015, 05:20 PM
SharonJ's Avatar
SharonJ
 
644 posts · Sep 2010
Duncan BC Canada
Is this better than using a plugin like WPTouch?
  #3  
Old Apr 20, 2015, 05:53 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
If it works for you there is one less plugin you need to deal with....
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Apr 21, 2015, 06:18 AM
tfarrell
 
43 posts · Dec 2012
Ireland
Hello
I like the facility to make the site mobile friendly but there is a lot of code work for non coders. Any plans to include this in a future update as an option to select.
Tom Farrell

Last edited by juggledad; Apr 21, 2015 at 06:52 AM.
  #5  
Old Apr 21, 2015, 06:55 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
Quote:
Originally Posted by tfarrell
there is a lot of code work for non coders
This is only copying and pasting three pieces of code. That doesn't seem like much code work.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #6  
Old Apr 21, 2015, 09:56 AM
extremecarver
 
126 posts · Jul 2009
You forgot IMHO:
ADD this to the body tag ("HTML Inserts: Body Tag"):
Code:
body onresize="OnResizeDocument()"
However - what would still be needed is code to remove the menu if smaller then X pixels...
(then use a plugin like Responsive Menu which already works well with the above code and will be shown automatically as the sidebar is detached - but that is of course no use as long as the normal menu is still showing.).
__________________
Don't settle for lousy expensive Maps - Get free Maps based on Openstreetmap with great autorouting for cyclists, hikers and Mountainbikers at http://openmtbmap.org
  #7  
Old Apr 21, 2015, 10:08 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
You forgot IMHO:
ADD this to the body tag ("HTML Inserts: Body Tag"):....
Code:
Yup, I forgot to add that (head slap...fixed now)

and actualy you don't need the word 'body'

as for the menus, not everyone will want to do that and see the other thread to follow up on it.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; May 5, 2015 at 06:38 PM.
  #8  
Old Apr 21, 2015, 01:51 PM
extremecarver
 
126 posts · Jul 2009
Oh - and just another optional one:

If you set image sizes - they will stick out of your viewport - very bad. Instead of going through all your posts/pages fixing this - just add the following to your CSS inserts:

Code:
img {
     border: 0 none;
     height: auto;
     max-width: 100%;
     vertical-align: middle;
}
(should we add max-height: 100%; too?). Note - I found this code somewhere here - but height: auto; was missing - so images got distorted.
__________________
Don't settle for lousy expensive Maps - Get free Maps based on Openstreetmap with great autorouting for cyclists, hikers and Mountainbikers at http://openmtbmap.org
  #9  
Old Jun 12, 2015, 11:57 AM
Talker
 
12 posts · Dec 2009
Illinois
To all the folks here, that help out those with malfunctioning themes, Thank you.

I though, am no longer am willing to devote any time to up-keeping, applying changes, or anything aside from writing post on my blog. Am seriously behind at this point in time.

After reading the things that could be done to Atahualpa (ver 3.5.3) and finding that an upgrade to (ver 3.7.23) did in fact loose my header, and would require me to do what I no longer care to do, I searched for a mobile friendly plugin.
Found some that got good Google ratings, but messed up my web site.

Did finally find one that didn't mess up my blog, and passed Googles
'Mobile Friendly' test.
https://wordpress.org/plugins/wordpress-mobile-pack/

http://www.thetalker.org/
http://www.thetalker.org/archives/author/talker6/

Google now says:
Awesome! This page is mobile-friendly.

So, will leave Atahualpa in the future, if need be, if updating the theme gets to problematic, time wise.
  #10  
Old Jul 25, 2015, 12:24 AM
redacter
 
14 posts · Oct 2009
I see how this works. But I'm having a problem with widgets. Instead of eliminating them from the mobile view, the code just pushes them all to the bottom. Is there any way to remove widgets from the mobile view?
  #11  
Old Jul 25, 2015, 02:16 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Sure, but why? That deletes the responsive...try this. Change the code
HTML Code:
if( window.innerWidth > 767 ) {
    jQuery(function($) {
            $("#left").detach().prependTo('#bodyrow'); 
          });
        }
To
HTML Code:
if( window.innerWidth > 767 ) {
    jQuery(function($) {
            $("#left").detach(); 
          });
        }
And see if that works for you
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Jul 27, 2015, 11:24 AM
myataname
 
6 posts · Jan 2012
I was able to successfully use the css inserts etc that were suggested on this thread to make my site more responsive, thank you very much! I had to do some tweaks to several pages, but it's coming along nicely.

I have one issue that has boggled my brain. I have an input form that looks fine on the desktop, but the fonts/size on the phone are too small - just for the input labels and fields. Everything else resizes just fine, even regular tables. I've tried all the typical fixes I could think of with no luck.
Does the suggested @media code have anything in there that could cause this?

btw - I was able to use your @media snippet to allow certain pictures to display on the desktop and not on the phone, where appropriate. That works great.
  #13  
Old Jul 27, 2015, 04:20 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
What is the URL of the site?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Jul 28, 2015, 02:01 PM
myataname
 
6 posts · Jan 2012
Thanks for responding. I think I figured it out - conflict between other CSS on the page. Still tweaking.
The site is rolmt.net
  #15  
Old Aug 31, 2016, 04:29 PM
lorih
 
4 posts · Jun 2010
Quote:
Originally Posted by juggledad
To get your Atahualpa site pass the Google 'Mobile-Friendly Test' do the following. This will make your site mobile friendly. If you don't pass the test after doing this - disable ALL your plugins and test again to see if a plugin is causing the issue.

1) go to ATO->Style & configure LAYOUT->Layout WIDTH and type (FLUID or FIXED) and set it to a percentage (as opposed to a 'fixed' width) then set the 'Layout MIN width' option to 320 (iPhone 4 size) or remove it altogether.

2) add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Header
HTML Code:
<meta name=viewport content="width=device-width, initial-scale=1">
3) add the following to ATO->HTML Inserts: Body Tag
HTML Code:
onresize="OnResizeDocument()"
4) Add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Body Bottom
HTML Code:
<script>
jQuery(document).ready(function($) {
    if( $(window).width() < 768 ) {
        // If any left sidebar exists
        if ( $('#left').length || $('#left-inner').length ) {   
            $("#middle").detach().prependTo('#bodyrow'); 
        }
    }
});
</script>
<script type="text/javascript">
        function OnResizeDocument () {
 if( window.innerWidth < 767 ) {
    jQuery(function($) {
              $("#middle").detach().prependTo('#bodyrow'); 
           });
        }
if( window.innerWidth > 767 ) {
    jQuery(function($) {
            $("#left").detach().prependTo('#bodyrow'); 
          });
        }
    }
    </script>
5) add the following to ATO->Add HTML/CSS Inserts->CSS Inserts
HTML Code:
@media only screen and (max-width: 767px) {
    table#layout,
    table#layout > tbody,
    table#layout > tbody > tr,
    table#layout > tbody > tr > td,
    table#layout > tr,
    table#layout > tr > td,
    table#layout td#header,
    table#layout td#left,
    table#layout td#left-inner,
    table#layout td#middle,
    table#layout td#right,
    table#layout td#right-inner,
    table#layout td#footer {
        display: block;
    }
    table#layout > colgroup {
        display: none;
    }
    div#wrapper,
    td#middle {
        width: auto;
    }
}
.hentry img { 
    max-width: 100%;    
    height: auto !important; 
    display: block !important; 
}
Note: in steps 4 and 5 you can adjust the number (767) to suit your choice.

Thanks to Flynn, sawyerjw, yukoner, kayphoonstar and extremecarver for their contributions.
When I did this - my header disappeared - on my regular monitor (didn't even get to look at the mobile devices). I just have one (no rotating images)... Any suggestions?

I did read thru the thread - but maybe missed the solution?
  #16  
Old Aug 31, 2016, 05:35 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
export your settings and attach them to a reply (dashboard->appearances->ATO->Export/Import)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #17  
Old Sep 4, 2016, 12:07 PM
Reni137
 
1 posts · Nov 2014
London, UK
But it says
"Since 3.6.5 PHP code cannot be used anymore in HTML/CSS Inserts."

I've used the mobile theme from jetpack previously but it is not working anymore.
I've just started making a child theme and using media queries. Not sure if this is influencing the above.
  #18  
Old Sep 4, 2016, 05:54 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
@reni137 a what php do you see in the above?

I have found very few cases for making a child theme with Atahualpa.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #19  
Old Sep 4, 2016, 06:28 PM
mykios
 
1 posts · Sep 2016
Hello,

After changed the ATO settings, why the images in my website www.jualsewakios.com are displayed in 1 column ?
I want it can be displayed in two columns for mobile view and 3 columns in desktop view. For comparison, you can check www.tempat-usaha.com

Besides that, how to make the menu above header image can be displayed as pull down menu in mobile view ?

Thanks.

Last edited by mykios; Sep 4, 2016 at 09:04 PM.
  #20  
Old Sep 5, 2016, 01:25 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
@mykois - your site is not fully loading. You should check your error log for possible errors.
This code does not make Atahualpa into a full mobile site, it allows it to pass googles mobile test
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Sep 5, 2016 at 04:38 AM.
  #21  
Old Sep 15, 2016, 06:51 AM
BertL
 
16 posts · Nov 2012
Thanks for this very helpful code! I use the fixed header position you taught me, which has been working great.
#header {position:fixed;}
Still maybe this is the reason why the header text doesn’t shrink enough when using a mobile device (the logo image doesn’t either, but that is not a problem). Any advise highly appreciated.
  #22  
Old Mar 29, 2018, 01:02 AM
VivBounty
 
51 posts · Jun 2012
Canadian Maritimes
Thanks JD!

This has ended a solid year of frustration for me.

Much appreciated.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How To: make Atahualpa more responsive/mobile friendly bswb97 Atahualpa 3 Wordpress theme 16 Jan 10, 2015 11:22 AM
Trying to use CCS to make Atahualpa Smart Phone Friendly Megan1967 Atahualpa 3 Wordpress theme 7 Jul 31, 2014 02:28 PM
plugin that shows a mobile-friendly version Atahualpa site Carme Plugins & Atahualpa 11 May 3, 2014 07:17 PM
Possible to make category plugin friendly araneum Page & Category Menu Bars 1 Feb 9, 2009 04:56 PM


All times are GMT -6. The time now is 12:27 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.