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


  #1  
Old Nov 14, 2014, 11:12 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
see How To pass Google's 'Mobile-Friendly Test' which contains the information in this thread


Here is a CSS fix to make Atahualpa responsive. If you have sidebars on the left you'd need the JavaScript below as well, or else the left sidebars will be above the main area when in mobile mode.
Adjust the values 767 (CSS) and 768 (JS, see below) to the viewport width at which you want the layout columns to align below each other:

Add the following CSS to "Add HTM/CSS Inserts" -> "CSS Inserts"
.

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

This should be all, if you have no left sidebars. It may work without the !important for .hentry img

To keep the main column on top, even with left sidebars:


Add the following to "Add HTM/CSS Inserts" -> "HTML Inserts: Body Bottom"

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>
This Javascript does not take into account browser resizing. This is only done once on page load.



The CSS is tested, the JS not. Let me know if it does not work.

This solution does not take care of thing like switching to a mobile menu, however the menu items should wrap.

Last edited by juggledad; Apr 20, 2015 at 05:37 AM. Reason: Made CSS more specific so it doesn't affect other tables
  #2  
Old Nov 14, 2014, 06:03 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
it mess up the default calender widget - you end up with one date per line.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Nov 15, 2014, 07:26 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Quote:
Originally Posted by juggledad
it mess up the default calender widget - you end up with one date per line.
I made the CSS more specific
  #4  
Old Nov 15, 2014, 09:27 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
That's better!!
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Dec 11, 2014, 11:03 AM
sky captain's Avatar
sky captain
 
61 posts · Sep 2009
Didn't work for me?

I tried this, looked at my blog on the iphone, and nothing was different. Tried it with and without the Henry section.

I have no left sidebar, so I didn't include the javascript.
  #6  
Old Jan 11, 2015, 10:15 PM
dynamicwebs
 
4 posts · Oct 2009
Auckland
Send a message via Skype™ to dynamicwebs
ok, I added this code to http://profilepictures.co.nz... it did not seem to have an effect on iPhone and iPad display at all... it did though in a browser. How should handle resizing the banner?
  #7  
Old Jan 21, 2015, 06:42 AM
extremecarver
 
127 posts · Jul 2009
I did the above hack - however comments get scrambled once the responsive layout kicks in and the sidebar gets moved to the bottom.

Comments then overlay the sidebar which is moved to the bottom.
(yeah - and as noted it does not help to make atahualpa more responsive on mobile screens - as it does not take into account dpi/ppi.

That's at least my experience. If there was some kind of ppi detection - or mobile phone browser detection - and comment problem fixed - it would actually be very useful. Right now it's more playing around without any usefulness (except people on desktop browser surfing with very small narrow window - at least for my layout with a single right widget sidebar).
__________________
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
  #8  
Old Jan 21, 2015, 10:00 AM
extremecarver
 
127 posts · Jul 2009
Okay - here are my complete HTML/CSS Inserts - this is working well (except broken comments) for layout with right sidebar. Even images work now - however you need to make sure image size is NOT set. Images will be scaled correctly! (anyone knows a plugin to go through all images and unset the size?) - off course the problem is that mobile devices won't use it - because their resolution is too high - and there is no PPI factor here.

Code:
div#imagecontainer {
background-size:cover !important;
padding-top:0.01%;
}

div#container {
padding-left 20px !important;
padding-right 20px !important;
}

img {
     border: 0 none;
     max-width: 100%;
     vertical-align: middle;
}



@media only screen and (max-width: 840px) {
    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;
    }
}
__________________
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; Jan 21, 2015 at 10:04 AM.
  #9  
Old Jan 21, 2015, 10:05 AM
extremecarver
 
127 posts · Jul 2009
That's how comments look - anyone got a solution or same problem?
- Comments are fine as long as the sidebar is shown on the right hand side - once the sidebar moves down - it will be below the squashed comments.
Attached Thumbnails
Click image for larger version

Name:	scrambled_comments.jpg
Views:	4674
Size:	216.2 KB
ID:	2640  
__________________
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
  #10  
Old Feb 11, 2015, 12:04 PM
sky captain's Avatar
sky captain
 
61 posts · Sep 2009
What's the latest update on the rumored update to Atahualpa that includes responsive-ness? I might have to reluctantly trudge over to Montezuma... but I've looked at it before and I got intimidated.

Darn it! I like Atahualpa and want to use it forever, but I have clients who want a responsive site.
  #11  
Old Feb 14, 2015, 05:19 AM
moomum
 
164 posts · Aug 2010
oh me too! I'd love Atahualpa to be responsive. I've gone over to the dark side and bought a responsive theme for a job that needs doing quite quickly - it is hell on a stick. Really limiting although it was presented as fully customisable. I've been spoiled with Atahualpa and I'm used to being able to do things like make sidebars a consistent width throughout the site or style widgets easily. This theme needs loads of coding just to make those simple things happen. My css isn't up to Montezuma yet though I'm working on it. I'd really happily pay money for a responsive Atahualpa.
  #12  
Old Feb 18, 2015, 01:42 AM
kayphoonstar
 
2 posts · Feb 2015
Quote:
Originally Posted by Flynn
Add the following to "Add HTM/CSS Inserts" -> "HTML Inserts: Body Bottom"

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>
This Javascript does not take into account browser resizing. This is only done once on page load.
Without being able to account for a screen resize, it just didn't seem feasible to try and keep the left sidebar. So, I was playing around a bit and in order to account for a screen resize (such as a change in orientation on an iPad - or loading a page in a small browser window and then maximizing) this seems to work:

Code:
<script type="text/javascript">
        function OnResizeDocument () {
 if( window.innerWidth < 820 ) {
    jQuery(function($) {
              $("#middle").detach().prependTo('#bodyrow'); 
           });
        }
if( window.innerWidth > 820 ) {
    jQuery(function($) {
            $("#left").detach().prependTo('#bodyrow'); 
          });
        }
    }
    </script>
Adding that script to "HTML Inserts: Header" and adding this to the body tag ("HTML Inserts: Body Tag"):
HTML Code:
<body onresize="OnResizeDocument()" >


Note: I'm using 820px instead of 768px in order to keep my nav bar from resizing.

The CSS adjustments are really, really nice! Thank you!
  #13  
Old Mar 1, 2015, 06:47 PM
sawyerjw
 
24 posts · Dec 2010
Eastern PA, USA
For those who are finding the CSS doesn't work on mobiles as is, try adding the following to the HTML Inserts: Header section:

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

You'll also need these tags to make Google happy. Without them they will flag the site as "not mobile friendly" even though you have the media query in your CSS.

I'm not seeing a problem with comments on my test site, but there is only one post with a comment so far.
  #14  
Old Mar 12, 2015, 07:25 AM
extremecarver
 
127 posts · Jul 2009
@sawyerjw

Thanks a lot for your reply. That was clearly missing. I got now 94 points on usability in google pagespeed insights.. (only some buttons to close to each user).

Adding to this - if you want to pass the google mobile test - you need to set the minimum page layout width to 320 pixels and no larger. Effectively something like 600 is much much better for real time use - but then it doesn't pass google tests - so that stays a bit a dilemma. At least for users with good eyes - 320 is really not good. So do it for google and blind people - or better optimize for real users??


Actually - how could one exclude the top navigation bar if viewport is smaller than X - say smaller than 600 pixels? (I use instead a menu in the right bar - which is moved down).

I got the comments fixed somehow now - but dunno why.
__________________
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; Mar 12, 2015 at 08:06 AM.
  #15  
Old Mar 18, 2015, 10:36 AM
Pikkals
 
42 posts · Jan 2010
I am so happy! Thank you, Thank you, Thank you. Everything looks perfect and I have 2 left columns to deal with and comments are great.

Google test says: Awesome! This page is mobile-friendly.
  #16  
Old Apr 14, 2015, 09:35 AM
extremecarver
 
127 posts · Jul 2009
Quote:
Originally Posted by kayphoonstar
Adding that script to "HTML Inserts: Header" and adding this to the body tag ("HTML Inserts: Body Tag"):
HTML Code:
<body onresize="OnResizeDocument()" >
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).
__________________
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
  #17  
Old Apr 14, 2015, 09:56 AM
extremecarver
 
127 posts · Jul 2009
Well - so Overall I'm left with the following on PageSpeed (as probably anybody using Atahualpa):
Remove Render Blocking Scripts (one of which is by Atahualpa - the last:

https://openmtbmap.org/…-includes/js....js?ver=1.11.1
https://openmtbmap.org/…s/jquery/jqu...n.js?ver=1.2.1
https://openmtbmap.org/de/?bfa_ata_file=js

And of course loads of:
"Size tap targets appropriately"


Anyone got any good recommendations on how to manage the tap targets better?
Also it would be great to have some code to get rid of the Menu1 alltogether if viewport is smaller than 640 pixels (that should mean all smartphones - and maybe some tablets).


Mobilegeddon is just a few days away - and I am afraid that the tap targets are still a big showstopper - and I like most atahualpa users will even with the above changes lose a lot of search traffic from google.
__________________
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
  #18  
Old Apr 16, 2015, 12:10 PM
extremecarver
 
127 posts · Jul 2009
What problems does google report for you?
Do you also have probs that the CSS is not working consistently and that the Sidebar from time to time is not actually removed but made smaller and detached but still there? (especially in Chrome - only Firefox is okay all the time for me).

If I don't find out why this sidebar problem exists - I will have to move to another theme before 21. April.

The Tap sizes are pretty much unsolvable for me - but it is possible to get to a rating that google stops complaining (if the sidebars vanish correctly - then usually 90-92 points on usability which is hopefully good enough). The rest is basically making sure it's speedy enough. I can get to 74-79 Points on Mobile Speed (95 points were possible if some third party plugins worked bettter) using ngx_pagespeed module and W3Total Cache (including minifying as well as possible).

Whats your domain?
__________________
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 juggledad; Apr 16, 2015 at 07:06 PM.
  #19  
Old Apr 16, 2015, 04:08 PM
yukoner
 
48 posts · Jan 2012
My domain is normhamilton.ca
There is a single page site that provides entry to my photography, writing or blog.
There are no side bars on this page at all.

Google's Mobile-Friendly Test gives the following response.

Not mobile-friendly
Page appears not mobile-friendly
  • Text too small to read
  • Mobile viewport not set
  • Links too close together
  • Content wider than screen

UPDATE

As I was reading through Google's pages in the PageSpeed Insights I it suggested I configure a viewpoint, and gave a link to some instructions. I added the following to the Add HTML/CSS Inserts/HTML Inserts: Header

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

It now says the site is mobile friendly. I'll have to see what happens now with the sites that have multiple plugins, e-commerce and a right side bar.

Last edited by yukoner; Apr 16, 2015 at 04:28 PM.
  #20  
Old Apr 16, 2015, 05:24 PM
extremecarver
 
127 posts · Jul 2009
Well you definitely forgot from the above explications:
body onresize="OnResize Document()"


Then Mobile viewport not set and Content wider than screen would not happen. Text too small is easily solvable (use 1em as minimum size and nothing smaller - you will need to check all style settings).
and Links too close together is hard. I don't know how to solve it (same for my tap sizes to small problem).
__________________
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
  #21  
Old Apr 17, 2015, 02:41 AM
ozbod
 
59 posts · Jan 2010
Stamford, Lincs, England
Is there a fully responsive version of ATA coming soon?
  #22  
Old Apr 19, 2015, 06:29 PM
yukoner
 
48 posts · Jan 2012
This works great on three of my sites, including a test site. Really pleased with that. However on two other sites, when viewed on a mobile, the site is limited in width to about 1/4 of the screen on my phone or doesn't move the sidebar below the main on my tablet. Text runs down left side instead of across the page. Any help is appreciated.
See Spirit Knives Yukon

I've been unable to locate what is causing the problem. I thought it might be the shopping cart, but it works OK on my test site with the shopping cart in place.

This is what I've put into the HTML/CSS Inserts (Everything has been cut and pasted from this thread)

HTML Inserts: Header

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

HTML Inserts: Body Tag

body onresize="OnResize Document()"

HTML Inserts: Body Bottom

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

CSS Inserts

/* Make Atahualpa Responsive */

@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;
}

Last edited by yukoner; Apr 19, 2015 at 11:00 PM. Reason: Clarifying information.
  #23  
Old Apr 20, 2015, 12:43 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
@yukoner: You have a syntax error in your body statement and many syntax errors in your CSS Inserts
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #24  
Old Apr 20, 2015, 09:04 AM
yukoner
 
48 posts · Jan 2012
Thanks Juggledad.

Do you mean errors in the what I'm adding here or something that was pre-existing before I added this?
  #25  
Old Apr 20, 2015, 10:28 AM
Covale
 
17 posts · Jul 2010
Dreams do come true! Thanks for making this happen!

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 01:17 AM.


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