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


 
Prev Previous Post   Next Post Next
  #1  
Old Nov 14, 2014, 11:12 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Responsive Atahualpa

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
 

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 06:32 AM.


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