|
#1

Apr 20, 2015, 06:22 AM
|
 |
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
How To make Atahualpa pass Google's 'Mobile-Friendly Test'
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>
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
Last edited by juggledad; Mar 28, 2018 at 05:43 AM.
|
#2

Apr 20, 2015, 06:20 PM
|
 |
|
|
644 posts · Sep 2010
Duncan BC Canada
|
|
Is this better than using a plugin like WPTouch?
|
#3

Apr 20, 2015, 06:53 PM
|
 |
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
If it works for you there is one less plugin you need to deal with....
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#4

Apr 21, 2015, 07:18 AM
|
|
|
43 posts · Dec 2012
Ireland
|
|
Hello
I like the facility to make the site mobile friendly but there is a lot of code work for non coders. Any plans to include this in a future update as an option to select.
Tom Farrell
Last edited by juggledad; Apr 21, 2015 at 07:52 AM.
|
#5

Apr 21, 2015, 07:55 AM
|
 |
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
Quote:
Originally Posted by tfarrell
there is a lot of code work for non coders
|
This is only copying and pasting three pieces of code. That doesn't seem like much code work.
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#6

Apr 21, 2015, 10:56 AM
|
|
You forgot IMHO:
ADD this to the body tag ("HTML Inserts: Body Tag"):
Code:
body onresize="OnResizeDocument()"
However - what would still be needed is code to remove the menu if smaller then X pixels...
(then use a plugin like Responsive Menu which already works well with the above code and will be shown automatically as the sidebar is detached - but that is of course no use as long as the normal menu is still showing.).
__________________
Don't settle for lousy expensive Maps - Get free Maps based on Openstreetmap with great autorouting for cyclists, hikers and Mountainbikers at http://openmtbmap.org
|
#7

Apr 21, 2015, 11:08 AM
|
 |
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Quote:
You forgot IMHO:
ADD this to the body tag ("HTML Inserts: Body Tag"):....
Code:
|
Yup, I forgot to add that (head slap...fixed now)
and actualy you don't need the word 'body'
as for the menus, not everyone will want to do that and see the other thread to follow up on it.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
Last edited by juggledad; May 5, 2015 at 07:38 PM.
|
#8

Apr 21, 2015, 02:51 PM
|
|
Oh - and just another optional one:
If you set image sizes - they will stick out of your viewport - very bad. Instead of going through all your posts/pages fixing this - just add the following to your CSS inserts:
Code:
img {
border: 0 none;
height: auto;
max-width: 100%;
vertical-align: middle;
}
(should we add max-height: 100%; too?). Note - I found this code somewhere here - but height: auto; was missing - so images got distorted.
__________________
Don't settle for lousy expensive Maps - Get free Maps based on Openstreetmap with great autorouting for cyclists, hikers and Mountainbikers at http://openmtbmap.org
|
#9

Jun 12, 2015, 12:57 PM
|
|
|
12 posts · Dec 2009
Illinois
|
|
To all the folks here, that help out those with malfunctioning themes, Thank you.
I though, am no longer am willing to devote any time to up-keeping, applying changes, or anything aside from writing post on my blog. Am seriously behind at this point in time.
After reading the things that could be done to Atahualpa (ver 3.5.3) and finding that an upgrade to (ver 3.7.23) did in fact loose my header, and would require me to do what I no longer care to do, I searched for a mobile friendly plugin.
Found some that got good Google ratings, but messed up my web site.
Did finally find one that didn't mess up my blog, and passed Googles
'Mobile Friendly' test.
https://wordpress.org/plugins/wordpress-mobile-pack/
http://www.thetalker.org/
http://www.thetalker.org/archives/author/talker6/
Google now says:
Awesome! This page is mobile-friendly.
So, will leave Atahualpa in the future, if need be, if updating the theme gets to problematic, time wise.
|
#10

Jul 25, 2015, 01:24 AM
|
|
I see how this works. But I'm having a problem with widgets. Instead of eliminating them from the mobile view, the code just pushes them all to the bottom. Is there any way to remove widgets from the mobile view?
|
#11

Jul 25, 2015, 03:16 AM
|
 |
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Sure, but why? That deletes the responsive...try this. Change the code
HTML Code:
if( window.innerWidth > 767 ) {
jQuery(function($) {
$("#left").detach().prependTo('#bodyrow');
});
}
To
HTML Code:
if( window.innerWidth > 767 ) {
jQuery(function($) {
$("#left").detach();
});
}
And see if that works for you
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#12

Jul 27, 2015, 12:24 PM
|
|
I was able to successfully use the css inserts etc that were suggested on this thread to make my site more responsive, thank you very much! I had to do some tweaks to several pages, but it's coming along nicely.
I have one issue that has boggled my brain. I have an input form that looks fine on the desktop, but the fonts/size on the phone are too small - just for the input labels and fields. Everything else resizes just fine, even regular tables. I've tried all the typical fixes I could think of with no luck.
Does the suggested @media code have anything in there that could cause this?
btw - I was able to use your @media snippet to allow certain pictures to display on the desktop and not on the phone, where appropriate. That works great.
|
#13

Jul 27, 2015, 05:20 PM
|
 |
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
What is the URL of the site?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#14

Jul 28, 2015, 03:01 PM
|
|
Thanks for responding. I think I figured it out - conflict between other CSS on the page. Still tweaking.
The site is rolmt.net
|
#15

Aug 31, 2016, 05:29 PM
|
|
Quote:
Originally Posted by juggledad
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?
|
#16

Aug 31, 2016, 06:35 PM
|
 |
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
export your settings and attach them to a reply (dashboard->appearances->ATO->Export/Import)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#17

Sep 4, 2016, 01:07 PM
|
|
|
1 posts · Nov 2014
London, UK
|
|
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.
|
#18

Sep 4, 2016, 06:54 PM
|
 |
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
@reni137 a what php do you see in the above?
I have found very few cases for making a child theme with Atahualpa.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#19

Sep 4, 2016, 07:28 PM
|
|
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.
Last edited by mykios; Sep 4, 2016 at 10:04 PM.
|
#20

Sep 5, 2016, 02:25 AM
|
 |
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
@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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
Last edited by juggledad; Sep 5, 2016 at 05:38 AM.
|
#21

Sep 15, 2016, 07: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.
|
#22

Mar 29, 2018, 02:02 AM
|
|
|
51 posts · Jun 2012
Canadian Maritimes
|
|
Thanks JD!
This has ended a solid year of frustration for me.
Much appreciated.
|
Thread Tools |
Search this Thread |
|
|
Display Modes |
Hybrid Mode
|
|