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.

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.

I'm not sure whether my last idea would make it ay easier. It would remain a javascript problem, I guess.

But thanks!

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.

That sounds like just what I'd want. Do you happen to have any idea about how to put that into code?

There is a problem with rotating images, it seems this 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.

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.

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!

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.

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.

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.

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

/* #### 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.

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?

Sure, but why? That deletes the responsive...try this. Change the code

if( window.innerWidth > 767 ) {
    jQuery(function($) {
            $("#left").detach().prependTo('#bodyrow'); 
          });
        }

To

if( window.innerWidth > 767 ) {
    jQuery(function($) {
            $("#left").detach(); 
          });
        }

And see if that works for you

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.

What is the URL of the site?

Thanks for responding. I think I figured it out - conflict between other CSS on the page. Still tweaking.
The site is rolmt.net

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

what happens if you take out all the code you add per this thread?

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>

Try changing teh height and width to 100%

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.

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?

Sorry but I can't help you since I am a MAC user and don't use IE.

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.