Wordpress Themes - WP Forum at BFA - How To make Atahualpa pass Google's 'Mobile-Friendly Test'

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)

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

Turning off plugins did not help. Left sidebar moves to right not down to bottom.

export attached

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?

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?

what did you discover?

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!

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

Code:

.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

Code:

@media only screen and (max-width: 767px)

section, and changing it slightly to:

Code:

  .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.

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.

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.

Thanks! Any suggestions for one?

city heaader image rotator
soliloquy
womderslider
wp nivo slider
wow slider

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

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?

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

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.

try adding this to the CSS inserts

HTML Code:

#metaslider_widget-2 {margin: 0;}

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

Quote:

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:

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?

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

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.

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

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

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.

@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

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.

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

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