Subscribe

April 28th, 2015

How to make your Atahualpa theme more mobile friendly

Come learn how and why to make a pinnable Pinterest pin invisible on your blog

Update: I now use a plugin to make my Athaulpa blogs mobile responsive. Read the review by clicking here.

While checking my Google Adsense stats, I clicked on the links Multi-Screen, Site Health, and most importantly, Revenue Optimization.

Although I appreciate the help from Google, their suggestions is just so much coding hell for me.

I just don’t speak the language.

I couldn’t even figure out how to increase the font in mobile only.

However, the good folks of atahualpa did help me increase my score by a few points by making my website more mobile responsive.

It is by know means perfect but I am getting closer.

I am going to put the steps here for my use on my other websites but also to help anyone else who needs the codes.

How to make your Atahualpa theme more mobile friendly

1) Go to Atahualpa Theme Options (ATO) under Appearance.

  2.) Click on Style & configure LAYOUT

3.) In Layout WIDTH and type (FLUID or FIXED), make sure that it is set to %  (as opposed to a ‘fixed’ width).

4.) Set the ‘Layout MIN width‘ option to 320 (iPhone 4 size) or remove it altogether.

5.)  Scroll down to Add HTML/CSS Inserts

6.) Find HTML Inserts: Header

HTML Code:
<meta name=viewport content="width=device-width, initial-scale=1">

7) Scroll down to HTML Inserts: Body Tag and insert the following code:

HTML Code:
onresize="OnResizeDocument()"

4) Scroll down to Add HTML/CSS Inserts->HTML Inserts: Body Bottom and insert the following code:

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) Scroll down to 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; 
}
img {
     border: 0 none;
     height: auto;
     max-width: 100%;
     vertical-align: middle;
}

Note: in steps 4 and 5 you can adjust the number (767) to suit your choice.

You May Also Like:   How to make round corners on sidebar in Atahualpa theme

It is also recommended that 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.

HTH,

~AmaBlogger

 

4 comments to How to make your Atahualpa theme more mobile friendly

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  

  

  

CommentLuv badge