Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   How To make Atahualpa pass Google's 'Mobile-Friendly Test' (http://forum.bytesforall.com/showthread.php?t=23158)

juggledad Nov 14, 2015 01:02 PM

First shut off all your plugins and see how it looks.
If that doesn't work, do an export of your settings (ATO->export/import settings) and attach it to a reply

zingo5 Nov 15, 2015 11:32 AM

1 Attachment(s)
Turning off plugins did not help. Left sidebar moves to right not down to bottom.

export attached

juggledad Nov 15, 2015 01:17 PM

Do this:
1) go to ATO->Add HTML/CSS Inserts->CSS Inserts and copy what you have to a text file and save it.
2) copy the CSS from post #1 of this thread and add it to the CSS inserts
3) go test

What do you see happening?

zingo5 Nov 17, 2015 06:32 AM

I added all of that css to the bottom of my css inserts. I think you are saying remove everything from the css inserts except that section and then test. Am I understanding correctly? Perhaps some loose !important tags that are not being over-ridden?

juggledad Nov 17, 2015 06:28 PM

what did you discover?

zingo5 Nov 19, 2015 05:36 AM

Yes when I remove the rest of the css it goes to the bottom. I'll start by getting rid of the 5 !important uses I probably don't need. If that doesn't work I'll add the css in in small chunks to find the culprit. Sorry for the late response- got delayed by a customer with an unreasonable deadline.
EDIT Solved it with the help of a validator -extra } in css and Google showed it as mobile friendly on the first try!

cefiar Feb 13, 2016 12:21 PM

As mentioned previously, I had issues with images because of this part on the end of the CSS section:


.hentry img {
    max-width: 100%;
    height: auto !important;
    display: block !important;

Noticed that along with my other changes, viewing attachments on their own post page meant they were wider than the screen (eg: clicking on the image in a gallery).

Ended up moving this INSIDE the

@media only screen and (max-width: 767px)
section, and changing it slightly to:


  .hentry .attachment img {
    max-width: 99%;
    height: auto !important;
    display: block !important;

Note: In the original post this CSS is outside the @media criteria, which means it applies to all size screens. This might be useful for some but isn't a huge issue for out site. YMMV.

aygart Apr 6, 2016 02:46 PM

How can I get the rotating header images to match the width of the body now that it is a percentage? I see a few methods which work when they are not rotating but cannot find for rotating.

juggledad Apr 6, 2016 04:27 PM

I don't know of any solution to this. I'd suggest using a responsive header image plugin instead oh the Atahualpa built I rotating image option.

aygart Apr 6, 2016 05:00 PM

Thanks! Any suggestions for one?

juggledad Apr 6, 2016 07:10 PM

city heaader image rotator
wp nivo slider
wow slider

take your pick - what works for one person may not be what the next person wants....

aygart Apr 8, 2016 08:52 AM

How do you get the slide show into the header? They all seem to make a slideshow which gives a shortcode. Where woulkd I insert that shortcode?

juggledad Apr 8, 2016 05:24 PM

You could create a dynamic widget area in the header option, add a shortcode aware plugin and use its widget and put the shortcode in that widget

aygart Apr 10, 2016 10:17 AM

Thank you! I got it working, but now I cannot figure out how to get rid of the blue area under the header image

My site is www.lowerwatt.com

Edit: I changed the color (it is the Layout Container Background) to match the menu so that it does not stick out but still cannot figure out how to get rid of it altogether.

juggledad Apr 10, 2016 12:46 PM

try adding this to the CSS inserts
HTML Code:

#metaslider_widget-2 {margin: 0;}

aygart Apr 10, 2016 08:25 PM

This worked perfectly, and my site now shows by google as mobile optimized. You guys are the best!

lorih Aug 31, 2016 04:29 PM


Originally Posted by juggledad (Post 112111)
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:

4) Add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Body Bottom
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) add the following to ATO->Add HTML/CSS Inserts->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;

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?

juggledad Aug 31, 2016 05:35 PM

export your settings and attach them to a reply (dashboard->appearances->ATO->Export/Import)

Reni137 Sep 4, 2016 12:07 PM

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.

juggledad Sep 4, 2016 05:54 PM

@reni137 a what php do you see in the above?

I have found very few cases for making a child theme with Atahualpa.

mykios Sep 4, 2016 06:28 PM


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 ?


juggledad Sep 5, 2016 01:25 AM

@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

BertL Sep 15, 2016 06:51 AM

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.

juggledad Sep 15, 2016 06:55 AM

@BertL what is the url so I can see the image.

Survivalpunk Sep 22, 2016 07:46 PM

I have been fighting with this for a week now. I tried everything in this thread and a few others and it mostly works. Last time I checked I passed the mobile-friendly test but my logo only shows a tiny bit. It doesn't resize it it just only shows a piece of it. Thanks for any help the site is http://www.survivalpunk.com/ Thanks for any help

All times are GMT -6. The time now is 06:01 AM.

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