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

juggledad · #1 Apr 20, 2015, 06:22 AM

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>