How to display left sidebar after page content on mobile

  • Resolved Gaerwn

    (@merllin)


    10 years, 4 months ago

    I am using a child theme. I have tried with the following code in the style.css of the child, but is not working:

    @media screen and (max-width:768px) {
.left_sidebar .sidebar {
   float:right;
}
.left_sidebar .pagecontent {
   float:left;
}
}

    Any sugestion about what should I do to have the left sidebar displayed after page content on mobile?

    Thank you

Viewing 2 replies - 1 through 2 (of 2 total)
  • HostFat

    (@hostfat)

    10 years, 3 months ago

    Hi

    Did you resolved it?
    I’m also interested on this 😐

    Thread Starter Gaerwn

    (@merllin)

    10 years, 3 months ago

    Hi,

    I solved it by changing the template for Page: Left Sidebar in the child theme.

    1. Copy the Hannari file template-left-sidebar.php in the child-theme folder.
    2. Open the child theme file for editing and move the code for sidebar get_sidebar(); after the DIV element containing the page content.
    Instead of

    <div class="columnwrapp pagesidebar innerpage left_sidebar">
	<?php get_sidebar(); ?>
	<div class="pagecontent">
        	<?php if (have_posts()) :
        	/* ............ */
		endif; ?>
	</div>
</div>

    you should have

    <div class="columnwrapp pagesidebar innerpage left_sidebar">
	<div class="pagecontent">
        	<?php if (have_posts()) :
        	/* ............ */
		endif; ?>
	</div>
	<?php get_sidebar(); ?>
</div>

    and the left sidebar is displayed after page content on tablet and mobile.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to display left sidebar after page content on mobile’ is closed to new replies.