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