Wordpress Themes - WP Forum at BFA
Page 1 of 3 1 23 >
Show 40 post(s) from this thread on one page

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 Apr 20, 2015 05:22 AM
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>

SharonJ Apr 20, 2015 05:20 PM
Is this better than using a plugin like WPTouch?

juggledad Apr 20, 2015 05:53 PM
If it works for you there is one less plugin you need to deal with....

tfarrell Apr 21, 2015 06:18 AM
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

lmilesw Apr 21, 2015 06:55 AM
Quote:
Originally Posted by tfarrell (Post 112121)
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.

extremecarver Apr 21, 2015 09: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.).

juggledad Apr 21, 2015 10:08 AM
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.

extremecarver Apr 21, 2015 01: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.

thetravelchronicle May 2, 2015 08:14 AM
I'm using Page Builder by SiteOrigin and Responsive Menu, and found that I only needed that first line of code in the ATO->Add HTML/CSS Inserts->HTML Inserts: Header

<meta name=viewport content="width=device-width, initial-scale=1">

However, Responsive Menu is still recommending that I use:

<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' />

Any thoughts on whether one is preferable over the other in Atahualpa?

extremecarver May 3, 2015 02:36 PM
user-scalable=no
--- I would not use it. I hate it when I cannot zoom out on a page because the content is due to some circumstance actually bigger than the viewport - and you are forced to pan around.

maximum-scale=1 - is more or less stating the same in your above example - you disallow the user to zoom in. I consider this bad form too.

Setting maximum-scale when user-scalable=no is actually doubling your statement. I don't know why this is proposed - maybe some browsers only respect the one or the other? So do it like indicated if you want to forbid zooming in/out. Don't do it if you want to allow the user to zoom in!

See also: http://stackoverflow.com/questions/2...e-attribute-in

thetravelchronicle May 3, 2015 08:12 PM
Thanks for the insight.

My first guess was that zooming causes problems with Responsive Menu, but I just tried it with good results. As I zoom in, the various widgets stack up in a single column just as they do when I resize the browser.

At least if I get a mystery condition at some point I'll have a place to start looking.

blondie May 5, 2015 12:50 PM
Thank you, JD for this code which works beautifully! I am currently working on a client's site, http://hope2heal.net, and have passed Google's mobile-friendly test. However, I have not been able to find code to make the header size responsive to the mobile device size. Is there a way to have the header image resize or do I have to make smaller versions of the image and somehow code them in the HTML/CSS inserts area to apply for all device sizes? Thanks a million!

juggledad May 6, 2015 05:49 AM
Try this
1) add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Header
HTML Code:
<meta name=viewport content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
2) move your image out of the theme/atahualpa/images/header folder - you can put it in the media library or create a new folder in the wp-content folder ad put it there
2) at ATO->Style & edit HEADER AREA->Configure Header Area - remove teh %image and replace it with
HTML Code:
<img class="img-responsive" src="http://yourdomain.com/...path-to-the-image.../header-new.jpg" width="753" height="369" /> %pages
you'll probably need to do some centering of the image, but I'll leave that as an exercise for you.

blondie May 6, 2015 03:37 PM
You are the wizard! Thank you very much for sharing your genius with us - its perfect and no centering required!!!

cefiar May 8, 2015 11:03 PM
Moderater note: see PATCH 3723-03: lack of a space in the <body..> when using 'HTML Inserts: Body Tag'

Note:
You need to put a single space before `onresize="OnResizeDocument()"`, as it seems it just gets appended directly onto the existing body string without a space, leading to incorrect HTML in the body tag. In my case I ended up with it being directly appended to the closing " in the body class statements.

juggledad May 10, 2015 03:24 PM
@cefiar - good find, and I'll bet it happens in IE. Safari, FireFox and Chrome seem to be able to handle the missing space fine.

cefiar May 10, 2015 06:06 PM
No idea how it affects IE. I just picked it up when I was looking at the source, as the source viewer I use highlighted it as an anomaly and brought it to my attention.

Many thanks for the above BTW. In my case, the .hentry img section caused problems with the default gallery I use. I removed the section:

Code:
.hentry img {
    max-width: 100%;   
    height: auto !important;
    display: block !important;
}
... then added some CSS (see below) within the section:
Code:
@media only screen and (max-width: 767px)
The site I look after (an NP community group) uses the built-in WP galleries a lot, so I ended up forcing the thumbnails down to 90px (from the default) to get it to fit without extending out of the viewport. We're only displaying 3 thumbnails wide per post, so this just fits in 320px with a little padding.

Code:
.attachment-thumbnail { width: 90px; height: 90px; }
I also dropped our logo width down in size from 135px to 100px, to make the top header a bit neater in size:

Code:
.logo { width: 100px; height: auto; }
And I changed the Site Title font a bit, mainly to reduce vertical whitespace:

Code:
.blogtitle { line-height: 1; margin: 0.5em 0 0; }
Note: These are NOT recommendations, just useful ideas for people if you want to tailor the experience a bit. I've added a bunch of CSS to do things like move my Social Media icons out of the top bar (back into the Sidebar they're implemented in), so they don't overlap my header when the screen size shrinks.

extremecarver May 12, 2015 12:15 PM
Well - I was really annoyed by all the Size Tap Targets problems in Google Pagespeed Mobile test - so I optimized many more things. I now score 100/100 Usability if it's not about links in main body text being too close to each other (that one is tough to solve without rewriting/reformatting your website - so think about it - but I guess for most of us except on frontpage or other very important pages - just let it be).

So some more tips - CSS inserts:
Code:
@media only screen and (max-width: 800px) {
    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#menu1 { display: none; }
    div#wrapper,
    td#middle { width: auto; }
    div#toc_container { line-height: 195%; }
    h1 { font-size: 1.8em; font-weight: normal; line-height: 1.2; margin: 0.3em 0 10px; color: #7F2F2F; }
    h2 { font-size: 1.65em; font-weight: bold; line-height: 1.3; margin: 1em 0 .2em; }
    h3 { font-size: 1.5em; font-weight: bold; line-height: 1.3; margin: 1em 0 .2em; }
    h4 { font-size: 1.3em; font-weight: bold; line-height: 1.35; margin: 1.33em 0 .2em; }
    h5 { font-size: 1.2em; margin: 1.67em 0; line-height: 1.4; font-weight: normal; }
    h6 { font-size: 1.2em; margin: 1.67em 0; line-height: 1.4; font-weight: normal; }
    p { font-size: 1.05em; margin: 1.67em 0; line-height: 1.5; font-weight: normal; }
}
As you can see - I inserted title and general text size into here. I do recommend to change font size and spacing between mobile view and normal desktop view. So just use this block once for your mobile - once for your normal CSS block with proper values and test around with it. (In general I would recommend against Atahualpa 0.8em default size. Make it 0.85 or 0.9 - too many users with High DPI screens nowadays and then 0.8em is just too small as default anyhow.


Code:
div#toc_container { line-height: 195%; }
-- This one is Table of Contents Plus plugin - if you use it - best either change line-height so it passes in googles tap target size test - or use display:none to not show it on mobile phones at all.



General usefull CSS inserts rules:
Code:
div.widget ul li {
  margin:6px 0 12px 0px; }
Makes sure your Recent Posts or Recent Comments widgets (by Atahualpa theme) have a bigger spacing in order to pass on google pagespeed.


Analyse your page with Firebug and google pagespeed to find out more problematic widgets - e.g. for me s2member login widget:
Code:
div#ws-plugin--s2member-pro-login-widget {
  line-height: 140%;
  font-size: 1.15em; }
For which I also change font-size and line-height.


Code:
.comment-meta a { margin:0px 15px 0px 0px;
line-height: 200%;}
Now this one is a must if you show comments in your Atahualpa themed site. It introduces empty space between data and reply link for your comments. Highly recommended (why is there line-height - well without it if this line is split into two lines due to limited width - it will insert enough space). I placed it here in general CSS section - because the space is really wellcome on desktop too (and line-height does not matter).




Then goto ATO Next-Previous Navigation and set:
Show Page Numbers (Pagination) for COMMENTS Navigation
to NO.


Last but not least - Atahualpa footer on posts/pages is not mobile friendly. I solved it by changing Footer Homepage and Footer Multi Post to:
%date('F jS, Y')% | %tags-linked('Tags: ', ', ', ' | ')% %comments('Leave a comment', 'One comment', '% comments', 'Comments are closed')% %edit(' | ', 'Edit this post', '')%

(note I took out category - you could alternatively try to get in some decent spacing - I did not manage that however).


Now you only have to see for additional issues in Pagespeed. E.g. I had one text widget (google feedburner subscribe button - code copied from google) for which I needed to introduce a &nbsp line break in order to get it work well.

Ilke May 27, 2015 06:59 AM
Hi Juggeldad,

when I follow your instructions,

- the header is responsive on mobile devices in both directions but not broad enough for my website (900px),

- the content seems to shrink in relation to the header, so it isn't spread over the whole screen but too narrow,

- I can't use rotating header images

What am I doing wrong? Is there any way to fix these issues?

juggledad May 27, 2015 06:03 PM
Quote:
- the header is responsive on mobile devices in both directions but not broad enough for my website (900px),
are you using the full width header option?
Quote:
- the content seems to shrink in relation to the header, so it isn't spread over the whole screen but too narrow,
I'd have to see this, the content does not shrink for me - have you disabled ALL your plugins?
Quote:
- I can't use rotating header images
I can - did you disable all your plugins?

Ilke May 28, 2015 01:05 AM
The website in question is www.gabrieledziemba.de

The full width header option is switched to NO,
The width of the header image was set to 900px, as is the fixed layout width (is that causing the problem?), but I changed it to your 753px, because 900 wasn't responsive in the same way.

And since I now put only one url of one header image into the ATO Style & Edit Header Area, there are no rotating images anymore.

On mobile phone you see how the content, which adjusted nicely to the screen before I made use of the responsive header code, is way too narrow.

Best,
Ilke

Ilke May 28, 2015 01:08 AM
ALL plugins are disabled.

Ilke May 28, 2015 01:14 AM
Actually, when I click on another page, the content is fine and adjusts well, but the header is not responsive.

juggledad May 28, 2015 05:02 AM
try changing the width="753" height="369" to width="100%" height="100%"

Ilke May 28, 2015 05:31 AM
Great! That did the trick, it works wonderfully. Only on a tablet held horizontally the header image gets distorted a bit (the height doesn't stay in proportion but increases).

The last question remaining is the rotation of the header images. Any way that is possible, you think?

I really appreciate your help, I'll donate right now.

juggledad May 28, 2015 06:18 AM
I think to get the rotating header mages and responsive will take some jscripting which I am not too proficient at :confused: I may take a look at when I get a chance.

Ilke May 28, 2015 06:22 AM
It would be okay if there could only be a static header on mobile devices / for the responsive header images, but I'd really like to keep the rotating header images on the computer screen.

Ilke May 28, 2015 06:24 AM
I'm not sure whether my last idea would make it ay easier. It would remain a javascript problem, I guess.

But thanks!

juggledad May 28, 2015 08:06 AM
You could put both images there and hide the responsive image when the screen is wide and when the screen is small, display the responsive image and hide the rotating image.

Ilke May 29, 2015 05:03 AM
That sounds like just what I'd want. Do you happen to have any idea about how to put that into code?

juggledad May 29, 2015 07:13 PM
There is a problem with rotating images, it seems this code
HTML Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
which gets added in the ATO->Add HTML/CSS Inserts->HTML Inserts: Header prevents the rotation.

other than that the flipping one image off and the other on will need be done is the jscript and I'm not proficient enough to provide you with the solution. Sorry.

Ilke Jun 2, 2015 06:06 AM
Thanks, I guessed it would be a bit more complex but gave it a try anyway. Good to know what I have to work on.

Valentijn van Duijvendijk Jun 2, 2015 03:40 PM
Hi,

I made the header image responsive vis the code:
2) at ATO->Style & edit HEADER AREA->Configure Header Area - remove teh %image and replace it with
HTML Code:
<img class="img-responsive" src="http://yourdomain.com/...path-to-the-image.../header-new.jpg" width="753" height="369" /> %pages

Unfortunately I now have just one header image instead of the rotating images. Do you have any tips how to solve this?


Thank you very much!

juggledad Jun 2, 2015 03:49 PM
Sorry, nope. It seems like there is a conflict between teh rotating image jscript and the jscript to make it responsive.

You could try using a responsive header plufgin inplace of the Atahualpa %image option.

Talker Jun 12, 2015 11:57 AM
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.

juggledad Jun 12, 2015 05:30 PM
Quote:
The last question remaining is the rotation of the header images. Any way that is possible, you think?
not that I know of, there seems to be a conflict with the google code.

extremecarver Jun 23, 2015 02:24 PM
BTW - If you want to size the viewport also differently depending on desktop screen sizes - I use the following now (seems to be fine in all big browsers - I'm not sure I picked the right elements - but I think so).

This goes into CSS inserts. You will need to leave max-width in the Style and Configure Layout section blank (default).


Code:
/* #### small Desktops #### */
@media screen and (min-width: 801px){
        tbody {max-width: 1080px; margin: auto;}
        div#container {max-width: 1080px; margin: auto;}
        table#layout {max-width: 1080px; margin: auto; font-size: 0.8em;}
}

/* #### HD Desktops #### */
@media screen and (min-width: 1260px){
        tbody {max-width: 1150px; margin: auto;}
        div#container {max-width: 1150px; margin: auto;}
        table#layout {max-width: 1140px; margin: auto; font-size: 0.8em;}
}

/* #### FHD Desktops #### */
@media screen and (min-width: 1800px){
        tbody {max-width: 1180px; margin: auto;}
        div#container {max-width: 1180px; margin: auto;}
        table#layout {max-width: 1170px; margin: auto; font-size: 0.85em;}
}

/* #### QHD Desktops #### */
@media screen and (min-width: 2400px){
        tbody {max-width: 1240px; margin: auto;}
        div#container {max-width: 1240px; margin: auto;}
        table#layout {max-width: 1230px; margin: auto; font-size: 0.87em;}
}

/* #### UHD Desktops #### */
@media screen and (min-width: 3000px){
        tbody {max-width: 1350px; margin: auto;}
        div#container {max-width: 1350px; margin: auto;}
        table#layout {max-width: 1340px; margin: auto; font-size: 0.95em;}
}
In order for the text-size to work, you need to take it out from Body, text and links tab, and of course also add it to the media only screen (which for me is max-width 800px)
e.g. table#layout {font-size: 0.85em;}

What I have not found out yet - is however how I can reduce the indent of the text on the media only screen?
I have 20 pixel indent - and would like to reduce that to 10 to fit a bit more content on mobile devices. I cannot find out where to put this however. I would also like to reduce the indent for bullets - also there I'm lost on how to decrease it.

redacter Jul 25, 2015 12: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?

juggledad Jul 25, 2015 02:16 AM
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

myataname Jul 27, 2015 11:24 AM
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.


All times are GMT -6. The time now is 07:03 PM.
Page 1 of 3 1 23 >
Show 40 post(s) from this thread on one page

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