Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

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


  #26  
Old May 28, 2015, 06:18 AM
juggledad's Avatar
juggledad
 
23,526 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I think to get the rotating header mages and responsive will take some jscripting which I am not too proficient at I may take a look at when I get a chance.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #27  
Old May 28, 2015, 06:22 AM
Ilke
 
126 posts · Aug 2010
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.
  #28  
Old May 28, 2015, 06:24 AM
Ilke
 
126 posts · Aug 2010
I'm not sure whether my last idea would make it ay easier. It would remain a javascript problem, I guess.

But thanks!
  #29  
Old May 28, 2015, 08:06 AM
juggledad's Avatar
juggledad
 
23,526 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #30  
Old May 29, 2015, 05:03 AM
Ilke
 
126 posts · Aug 2010
That sounds like just what I'd want. Do you happen to have any idea about how to put that into code?
  #31  
Old May 29, 2015, 07:13 PM
juggledad's Avatar
juggledad
 
23,526 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"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; Jun 2, 2015 at 08:38 AM.
  #32  
Old Jun 2, 2015, 06:06 AM
Ilke
 
126 posts · Aug 2010
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.
  #33  
Old Jun 2, 2015, 03:40 PM
Valentijn van Duijvendijk
 
4 posts · Jul 2010
Utrecht, the Netherlands
Send a message via Skype™ to Valentijn van Duijvendijk
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!
  #34  
Old Jun 2, 2015, 03:49 PM
juggledad's Avatar
juggledad
 
23,526 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #35  
Old Jun 12, 2015, 11:57 AM
Talker
 
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.
  #36  
Old Jun 12, 2015, 05:30 PM
juggledad's Avatar
juggledad
 
23,526 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #37  
Old Jun 23, 2015, 02:24 PM
extremecarver
 
100 posts · Jul 2009
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.
__________________
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

Last edited by extremecarver; Jun 23, 2015 at 03:00 PM.
  #38  
Old Jul 25, 2015, 12:24 AM
redacter
 
14 posts · Oct 2009
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?
  #39  
Old Jul 25, 2015, 02:16 AM
juggledad's Avatar
juggledad
 
23,526 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
  #40  
Old Jul 27, 2015, 11:24 AM
myataname
 
6 posts · Jan 2012
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.
  #41  
Old Jul 27, 2015, 04:20 PM
juggledad's Avatar
juggledad
 
23,526 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
  #42  
Old Jul 28, 2015, 02:01 PM
myataname
 
6 posts · Jan 2012
Thanks for responding. I think I figured it out - conflict between other CSS on the page. Still tweaking.
The site is rolmt.net
  #43  
Old Aug 3, 2015, 08:58 PM
myataname
 
6 posts · Jan 2012
I was able to get nearly all of my site's pages and posts looking good on various devices, including iphones. Yay!

However, I have a page of short videos that do not play well in portrait mode on iphone using Atahualpa. They play sometimes in landscape (rotated screen). They work alright when I checked them using a different theme. What am I missing?

The page is:
http://www.rayoflightmassagetraining...-testimonials/

Thanks in advance, John
  #44  
Old Aug 4, 2015, 04:55 AM
juggledad's Avatar
juggledad
 
23,526 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what happens if you take out all the code you add per this thread?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #45  
Old Aug 4, 2015, 11:31 PM
myataname
 
6 posts · Jan 2012
There isn't a whole lot of code on this page. Simply:

<div style="text-align: center;">
<h3 style="margin-top: 8px;"><strong>Video Testimonials from ROLMT Students</strong></h3>

<p id="LindaPullen-Brewer"> </p>
<iframe src="http://www.youtube.com/embed/OwTcB6mqi9I?rel=0&amp;autoplay=0" height="177" width="310" allowfullscreen="" frameborder="0"></iframe>
<hr />
<p id="GeneSullivan"> </p>
<iframe src="http://www.youtube.com/embed/aXHYrAxqzvM?rel=0&amp;autoplay=0" height="177" width="310" allowfullscreen="" frameborder="0"></iframe>
<hr />

etc, etc - more videos

</div>
  #46  
Old Aug 5, 2015, 11:19 AM
juggledad's Avatar
juggledad
 
23,526 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Try changing teh height and width to 100%
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #47  
Old Aug 5, 2015, 11:15 PM
myataname
 
6 posts · Jan 2012
Changing width and height to 100% might work alright for a phone, but then it looks weird on the desktop - a very wide iframe.

Also, I saw on w3schools that "In HTML 4.01, the width could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels." So I guess % is deprecated.

Thanks anyway, not a huge issue. I appreciate the help.
  #48  
Old Oct 25, 2015, 08:27 AM
dadadesign
 
8 posts · Nov 2009
juggledad and others, thank you very much for your code! It's very nice to see, how good old Atahualpa works as an responsive theme.

However the script

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

seems not to work perfectly in IE 7 - 9. I still see 3 columns. Is there a way to make IE behave like most of the other browsers?
  #49  
Old Oct 25, 2015, 04:54 PM
juggledad's Avatar
juggledad
 
23,526 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Sorry but I can't help you since I am a MAC user and don't use IE.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #50  
Old Nov 14, 2015, 09:11 AM
zingo5
 
92 posts · Sep 2011
I did everything in the tutorial (will it handle right sidebars? I turned mine off until I get the rest of this working).
What happens now is that on mobile my left sidebar appears on the right. I want it to go to the bottom below the main content. Site is http://cheapsearchengineoptimizationsite.com

I tried disabling all plugins and changing widths but I can't get the sidebar to go to the bottom. Turned plugins back on when turning them off didn't 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 11:22 AM
Trying to use CCS to make Atahualpa Smart Phone Friendly Megan1967 Atahualpa 3 Wordpress theme 7 Jul 31, 2014 02:28 PM
plugin that shows a mobile-friendly version Atahualpa site Carme Plugins & Atahualpa 11 May 3, 2014 07:17 PM
Possible to make category plugin friendly araneum Page & Category Menu Bars 1 Feb 9, 2009 04:56 PM


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


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