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 »

Responsive Atahualpa


  #26  
Old Apr 20, 2015, 11:40 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
You have at least one open bracket where you should have a close bracket

Do this, add the following to the very begining of the CSS Inserts
HTML Code:
body {
    background-color: #00ffff;
    background-image: none;
}
go look at the page - is the background a light blue? (it should be).

Now move that CSS to the end of the CSS Inserts and go view the page. Is the background light blue? Probably not it you haven't fixed teh syntax errors, so move the code halfway up in the CSS Inserts to see if you can find the error. If it works, you know the error is in the bottom half of your CSS Inserts and keep repeating, if it doesn't then you know the error is in the top half of the CSS inserts. Keep moving it and you can narrow down the issue and find and fix 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 lmilesw; Apr 21, 2015 at 07:00 AM.
  #27  
Old Apr 20, 2015, 07:10 PM
yukoner
 
48 posts · Jan 2012
For some reason the only way I can find this suggestion from you was to quote another response from you. That said, this did the trick for Spirit Knives Yukon. Now on to the other site; it has a left sidebar. Thanks for this very helpful suggestion, Juggledad.

Quote:
Originally Posted by juggledad
You have at least one open bracket where you should have a close bracket

Do this, add the following to the very begining of the CSS Inserts
HTML Code:

body {
background-color: #00ffff;
background-image: none;
}

go look at the page - is the background a light blue? (it should be).

Now move that CSS to teh end of the CSS Inserts and go view the page. Is the background light blue? Probably not it you haven't fixed teh syntax errors, so move the code halfway up in the CSS Inserts to see if you can find the error. If it works, you know the error is in the bottom half of your CSS Inserts and keep repeating, if it doesn't then you know the error is in the toop haalf of the CSS inserts. Keep moving it and you can narrow down the issue and find and fix it.
  #28  
Old Apr 21, 2015, 07:31 AM
extremecarver
 
126 posts · Jul 2009
Actually how can we remove the Top Menu if width smaller X?

Then we could use Responsive Menu instead - because the Menu really does not work well for mobile - but it would be a shame to use an Responsive menu on desktop too (not very quick for desktop and people do not look out for 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
  #29  
Old Apr 21, 2015, 09:58 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
With a few minutes using a code examiner and looking at the CSS in this thread, you should be able to puzzle it out and learn something to boot.

If you have problems, post what you have tried and why and we'll see if I can help you solve the issue yourself.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #30  
Old Apr 21, 2015, 10:03 AM
extremecarver
 
126 posts · Jul 2009
Well I would guess somehow like the following - but I don't know what the menu bar is instead of middle here..

<script type="text/javascript">
function OnResizeDocument () {
if( window.innerWidth < 820 ) {
jQuery(function($) {
$("#middle").detach
});
}
</script>
__________________
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
  #31  
Old Apr 21, 2015, 10:17 AM
extremecarver
 
126 posts · Jul 2009
Well I guess it's called
div#menu1 ul.rMenu
ur ul.rMenu

but neither works with my above code example...
So nothing of this works:
Code:
if( window.innerWidth < 800 ) {
jQuery(function($) {
$("#ul.rMenu").remove;
});
}
if( window.innerWidth < 800 ) {
jQuery(function($) {
$("#div#menu1 ul.rMenu").remove;
});
}
if( window.innerWidth < 800 ) {
jQuery(function($) {
$("#menu1").remove;
});
}
__________________
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; Apr 21, 2015 at 10:33 AM.
  #32  
Old Apr 21, 2015, 10:41 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
it's all done in the CSS...
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #33  
Old Apr 21, 2015, 12:43 PM
extremecarver
 
126 posts · Jul 2009
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;
    }
}
Okay - finally got it. For anyone who want to do the same - it's div#menu1 in the above code of the CSS inserts. Wow - took me a long time learning all that CSS code...

When to do this? If you get the dreaded "tSize tap targets appropriately" message in your google webmaster / pagespeed insights mobile - User Interface (and identify that it's the menu bar that is responsible).

I actually recommend to do this in any case - as the menu1 is really impossible to use with submenus on a mobile phone. If you only use pages without subpages you may be fine not using this hack, however as soon as ...

Then Install "Responsive Menu" plugin or similar (like "WP Responsive Menu" or others). Responsive Menu automatically detects the screen size below which it should be activated... (if not you can set it manually too). Have not tried out other responsive menus yet though...
__________________
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
  #34  
Old Apr 25, 2015, 05:22 PM
yukoner
 
48 posts · Jan 2012
Well, using the information on this thread and the one linked to at the beginning, I've gotten 4 out of 5 sites working wonderfully with mobiles. This last one, see link below, has me stumped. I've spent a few days now to no avail.

I've used Juggledad's suggestion of putting
body {
background-color: #00ffff;
background-image: none;
}
into the CSS inserts at the beginning and end - the background says light blue for both, indicating there are no syntax issues in the CSS inserts. I've deactivated all my plugins - still didn't work. I've even tried removing the left sidebar and that didn't help, so I put it back. The left sidebar shifts to the middle of the page on my mobile(s), but the sidebars are not appending under each other as they are on my other sites. With the left sidebar removed, the main body and right sidebar remain side-by-side. I know this will be something simple that I'm unable to locate. Any suggestions would be appreciated.

http://normhamilton.ca/writer/
  #35  
Old Apr 26, 2015, 04:57 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
You have a syntax error in your CSS Inserts. Do this

1) do an export of yout settings (ATO->Export/Import_
2) take everything BUT the responsive code out of the CSS Inserts and put it in a text file. Then one by one (or two by two) cut the CSS out of the text file and put it back into the CSS Inserts and test the site. at some point it will fail and you'll know the bad CSS
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #36  
Old Apr 26, 2015, 10:09 AM
yukoner
 
48 posts · Jan 2012
Found it! There was an extra close bracket right near the end of the CSS inserts.

Thanks Juggledad. Learning these methods of investigating the CSS inserts is invaluable.
  #37  
Old May 23, 2015, 08:57 PM
kayphoonstar
 
2 posts · Feb 2015
Quote:
Originally Posted by extremecarver
Ouch - I finally found the bug in this one - Do not add the the smaller at the beginning "<" nor the ">" at the end - just:
Code:
body onresize="OnResize Document()"
is needed. Otherwise there will be an empty line introduced at the top... (and if you retry with Chrome - make sure to use incognito modus - I don't know at all but without fully resetting Chrome - chrome will run a bit havoc and sometimes not effect the changes - even though all others browsers work fine).
Ouch, indeed! Thank you for pointing this out.

I also found another issue with this but I'm not sure when it started. I only discovered it when updating Atahualpa to 3.7.23 and WP to 4.2.2. I had a problem with pages where there is an input field on Android devices: the keyboard won't stay up because Android adjusts the screen size when the virtual keyboard pops up which then runs the 'onresize' function again and the input field loses focus and the keyboard disappears - it is an ugly loop. AFAIK, it's only Android. iOS doesn't exhibit the same issue.

At this point the only workaround I could get to work was to remove the left sidebar from any pages that have an input field and adding back the check for a left sidebar function:
Code:
if ( $('#left').length || $('#left-inner').length ) {   
            $("#middle").detach().prependTo('#bodyrow'); 
        }
That seems to keep the 'onresize' function from firing and the keyboard stays up for text input.
Also, FWIW, I've switched to using the 'window.onresize' function in a separate file:
Code:
window.onresize = resize;

    function resize(){
if( window.innerWidth < 820 ) {
    jQuery(function($) {
        // If any left sidebar exists
        if ( $('td#left').length  ) {  
              $("#middle").detach().prependTo('#bodyrow'); 
           }});
        } else 
if( window.innerWidth > 820 ) {
    jQuery(function($) {
        // If any left sidebar exists
        if ( $('td#left').length  ) {  
            $("td#left").detach().prependTo('#bodyrow'); 
          }});
        }
   
    }
...and put it directly into the functions.php file:
Code:
function resize_window()
{
    wp_register_script( 'resize', get_template_directory_uri() . '/js/resize.js', array( 'jquery') );
    wp_enqueue_script('resize');
}
add_action( 'wp_enqueue_scripts', 'resize_window' );
I hope this helps somebody. Cheers!
  #38  
Old Aug 24, 2015, 11:23 AM
Sally
 
201 posts · Jul 2010
Kentucky
WPTouch is crashing my site so I can't use it anymore...

After reading all the comments here and the different hacks, I'm not sure the original insert will get the job done?

I'd happily pay for ATA to have it be responsive. Having to add more inserts for 30 sites to get them all responsive is a lot of time and frustration. Most people surf on devices these days.

Thanks!
  #39  
Old Nov 22, 2016, 04:02 PM
tbaxter
 
92 posts · May 2012
Germantown, MD
I am not fluent enough in code to grasp all of the variations after the first two posts in this thread.

Do I need to use any of these in my site to make it pass the Google Mobile Test?

Please advise. And thanks.
  #40  
Old Nov 22, 2016, 04:34 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
did you try it? did it pass or fail?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #41  
Old Nov 22, 2016, 08:41 PM
tbaxter
 
92 posts · May 2012
Germantown, MD
Failed. Looking into it.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Atahualpa 4.0 = responsive derekwbeck New Versions, & Updating 52 Dec 22, 2015 03:33 AM
How To: make Atahualpa more responsive/mobile friendly bswb97 Atahualpa 3 Wordpress theme 16 Jan 10, 2015 11:22 AM
ETA for Responsive version of Atahualpa jms5017 New Versions, & Updating 4 Jun 26, 2013 07:14 AM
Any news on a responsive Atahualpa 4? JFG New Versions, & Updating 1 Jun 10, 2012 03:26 PM
Atahualpa as responsive theme kjetil New Versions, & Updating 7 Jun 8, 2012 03:35 PM


All times are GMT -6. The time now is 05:36 AM.


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