Right Sidebar moves above content on mobile

http://bit.ly/2dVmgYj

On this page, when width is shrunk to mobile size, the right sidebar moves over the content instead of under. How can I make the widget move under content for mobile?

  • Nastia

    Hello Mike D , I hope you are doing well today!

    I tested the theme on my site and it looks like the theme were built this way. To move the widget to bottom, you need to edit themes .php files wich will be much quicker. Otherwise, to move the sidebar to the bottom will require a lot of custom CSS code. I am afraid this is out of a scope that we can provide in our forums.

    Please contact the theme devlopers about this:
    https://www.usabilitydynamics.com/contact-us

    I searched for a similar request regarding the WP Avalon theme, but I am afraid there is none on the web.

    I can provide a workaround here, a CSS code that will hide the right sidebar for mobile devices.

    @media only screen and (max-device-width: 740px) {
    .sidebar.sidebar_right.col-md-4 {
           display:none;
    }
    }

    I hope this will help!

    Kind regards,
    Nastia

  • Mike D

    I fixed this by moving <?php get_sidebar(); ?>:

    <?php
    /**
     * Home page template file
     *
     * @package Usability Dynamics, Inc.
     * @subpackage Avalon
     * @since Avalon 1.0
     */
    get_header();
    ?>
    
    <div class="container">
    
      <?php get_sidebar(); ?>
    
      <?php if (is_active_sidebar('sidebar-left') || is_active_sidebar('sidebar-right')) : ?>
        <div class="content col-md-8">
        <?php else : ?>
          <div class="content col-md-12">
          <?php
          endif;
    
          if (get_theme_mod('header_image_post_disable', '1') != 1) :
            echo '<h1 class="page-title">';
            single_post_title();
            echo '</h1>';
          endif;
    
          if (have_posts()) :
    
            the_posts_pagination(array(
              'prev_text' => __('Prev', 'wp-avalon'),
              'next_text' => __('Next', 'wp-avalon'),
              'before_page_number' => '<span class="meta-nav screen-reader-text"></span>',
            ));
    
            while (have_posts()) : the_post();
    
              get_template_part('template-parts/content/content', 'archive');
    
            endwhile;
    
            the_posts_pagination(array(
                'prev_text' => __('Prev', 'wp-avalon'),
                'next_text' => __('Next', 'wp-avalon'),
                'before_page_number' => '<span class="meta-nav screen-reader-text"></span>',
            ));
          else :
    
            get_template_part('template-parts/content/content', 'none');
    
          endif;
          ?>
        </div>
    
      </div>
    
      <?php
      get_footer();

    to:

    <?php
    /**
     * Home page template file
     *
     * @package Usability Dynamics, Inc.
     * @subpackage Avalon
     * @since Avalon 1.0
     */
    get_header();
    ?>
    
    <div class="container">
    
      <?php if (is_active_sidebar('sidebar-left') || is_active_sidebar('sidebar-right')) : ?>
        <div class="content col-md-8">
        <?php else : ?>
          <div class="content col-md-12">
          <?php
          endif;
    
          if (get_theme_mod('header_image_post_disable', '1') != 1) :
            echo '<h1 class="page-title">';
            single_post_title();
            echo '</h1>';
          endif;
    
          if (have_posts()) :
    
            the_posts_pagination(array(
              'prev_text' => __('Prev', 'wp-avalon'),
              'next_text' => __('Next', 'wp-avalon'),
              'before_page_number' => '<span class="meta-nav screen-reader-text"></span>',
            ));
    
            while (have_posts()) : the_post();
    
              get_template_part('template-parts/content/content', 'archive');
    
            endwhile;
    
            the_posts_pagination(array(
                'prev_text' => __('Prev', 'wp-avalon'),
                'next_text' => __('Next', 'wp-avalon'),
                'before_page_number' => '<span class="meta-nav screen-reader-text"></span>',
            ));
          else :
    
            get_template_part('template-parts/content/content', 'none');
    
          endif;
          ?>
        </div>
    <?php get_sidebar(); ?>
      </div>
    
      <?php
      get_footer();