How to make your Atahualpa theme more mobile friendly

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.

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:

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

HTML Code:
jQuery(document).ready(function($) {
    if( $(window).width() < 768 ) {
        // If any left sidebar exists
        if ( $('#left').length || $('#left-inner').length ) {   
<script type="text/javascript">
        function OnResizeDocument () {
 if( window.innerWidth < 767 ) {
    jQuery(function($) {
if( window.innerWidth > 767 ) {
    jQuery(function($) {

5) Scroll down to CSS Inserts

HTML Code:
@media only screen and (max-width: 767px) {
    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;
    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 do I get a widget in my header in the 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.

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Comments