Mobile layout adjustment except for blog

[WaggingLabs]

Hello! Support previously helped me shift the sidebar above the body content for mobile devices in this thread: https://theme.co/apex/forum/t/layout-page-title-then-widget-then-body-for-mobile/59779

I realized I still need the blog index, blog post, and search result pages in the standard configuration with the sidebar below on mobile.

Is this possible?

[ruenel]

Hello @WaggingLabs,

Thanks for writing in!

Are you referring to this code?

(function($){
	$(window).on('load resize', function(){
		var W = $(window).width();
		if ( W > 480 && W < 980 ) {
			$('.page .entry-header').insertBefore('.x-main');
		} else {
			$('.page .entry-header').prependTo('.x-main .entry-wrap');
		}
	});
})(jQuery)

Then you can update into this to include the other pages as well:

(function($){
	$(window).on('load resize', function(){
		var W = $(window).width();
		if ( W > 480 && W < 980 ) {
			$('body .entry-header').insertBefore('.x-main');
		} else {
			$('body .entry-header').prependTo('.x-main .entry-wrap');
		}
	});
})(jQuery)

Hope this helps. Kindly let us know.

[WaggingLabs]

Hi @RueNel — It appears this thread and my other thread are merging https://theme.co/apex/forum/t/adjusting-layout-for-768-979px-views/61601/3

I removed both the JS and CSS to test, and it appears the CSS below is the only one that can affect the change needed. So, is it possible to just target all sidebar right layouts (minus the blog index and blog posts) while keeping my 3-columns intact?

  /**** PLACE SIDEBAR ON TOP MOBILE   ***/   
  
  @media (max-width: 979px) {
		 .x-container{
        display:flex;
        flex-flow:column wrap;
    }
    .x-container .x-sidebar {
      order: 1;
    }
    .x-container .x-main {
      order: 2;
    }
    
    aside.x-sidebar.right {
      margin-top: 30px;
    }
  }

Thank you!

[ruenel]

Hello @WaggingLabs,

I have replied on the other thread. You will need to update the css code by using this instead:

@media (max-width:979px){
    .x-container.offset{
        display:flex;
        flex-flow:column wrap;
    }

    .x-container.offset .x-sidebar{
        order:1;
    }

    .x-container.offset .x-main{
        order:2;
    }

    .x-container.offset aside.x-sidebar.right{
        margin-top:30px;
    }
}

Please let us know if this works out for you.