Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

How To make Atahualpa pass Google's 'Mobile-Friendly Test'


  #51  
Old Nov 14, 2015, 02:02 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"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; Nov 14, 2015 at 02:05 PM.
  #52  
Old Nov 15, 2015, 12:32 PM
zingo5
 
92 posts · Sep 2011
Turning off plugins did not help. Left sidebar moves to right not down to bottom.

export attached
Attached Files
File Type: txt ata-cheapsearchengineoptimizationsitecom-20151115.txt (28.6 KB, 4888 views)
  #53  
Old Nov 15, 2015, 02:17 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #54  
Old Nov 17, 2015, 07:32 AM
zingo5
 
92 posts · Sep 2011
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?
  #55  
Old Nov 17, 2015, 07:28 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what did you discover?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #56  
Old Nov 19, 2015, 06:36 AM
zingo5
 
92 posts · Sep 2011
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!

Last edited by zingo5; Nov 19, 2015 at 08:20 AM.
  #57  
Old Feb 13, 2016, 01:21 PM
cefiar
 
24 posts · Jun 2014
Melbourne, Australia
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.
  #58  
Old Apr 6, 2016, 03:46 PM
aygart
 
30 posts · Mar 2012
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.

Last edited by aygart; Apr 6, 2016 at 05:10 PM.
  #59  
Old Apr 6, 2016, 05:27 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #60  
Old Apr 6, 2016, 06:00 PM
aygart
 
30 posts · Mar 2012
Thanks! Any suggestions for one?
  #61  
Old Apr 6, 2016, 08:10 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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....
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #62  
Old Apr 8, 2016, 09:52 AM
aygart
 
30 posts · Mar 2012
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?

Last edited by aygart; Apr 8, 2016 at 11:31 AM.
  #63  
Old Apr 8, 2016, 06:24 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #64  
Old Apr 10, 2016, 11:17 AM
aygart
 
30 posts · Mar 2012
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.

Last edited by aygart; Apr 10, 2016 at 11:51 AM.
  #65  
Old Apr 10, 2016, 01:46 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try adding this to the CSS inserts
HTML Code:
#metaslider_widget-2 {margin: 0;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #66  
Old Apr 10, 2016, 09:25 PM
aygart
 
30 posts · Mar 2012
This worked perfectly, and my site now shows by google as mobile optimized. You guys are the best!
  #67  
Old Aug 31, 2016, 05:29 PM
lorih
 
4 posts · Jun 2010
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?
  #68  
Old Aug 31, 2016, 06:35 PM
juggledad's Avatar
juggledad
 
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
  #69  
Old Sep 4, 2016, 01:07 PM
Reni137
 
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.
  #70  
Old Sep 4, 2016, 06:54 PM
juggledad's Avatar
juggledad
 
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
  #71  
Old Sep 4, 2016, 07:28 PM
mykios
 
1 posts · Sep 2016
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.
  #72  
Old Sep 5, 2016, 02:25 AM
juggledad's Avatar
juggledad
 
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.
  #73  
Old Sep 15, 2016, 07:51 AM
BertL
 
16 posts · Nov 2012
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.
  #74  
Old Sep 15, 2016, 07:55 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
@BertL what is the url so I can see the image.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #75  
Old Sep 22, 2016, 08:46 PM
Survivalpunk
 
1 posts · Sep 2016
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

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How To: make Atahualpa more responsive/mobile friendly bswb97 Atahualpa 3 Wordpress theme 16 Jan 10, 2015 12:22 PM
Trying to use CCS to make Atahualpa Smart Phone Friendly Megan1967 Atahualpa 3 Wordpress theme 7 Jul 31, 2014 03:28 PM
plugin that shows a mobile-friendly version Atahualpa site Carme Plugins & Atahualpa 11 May 3, 2014 08:17 PM
Possible to make category plugin friendly araneum Page & Category Menu Bars 1 Feb 9, 2009 05:56 PM


All times are GMT -6. The time now is 04:19 AM.


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