Mobile sidebar

Basically I’ve tested this with multiple mobile devices and through the built-in mobile preview on the theme.

The sidebar works perfectly fine on PC but on mobile all the content shows below the page which is simply not the intended function of a sidebar.

How can I make the sidebar show up on the side for mobile devices? If not possible then let me know how to disable the sidebar only for mobile devices.

Thanks!

Hello there,

Sidebar shifting to the bottom while on mobile device is really common in responsive design. The default WordPress theme like Twenty Seventeen also does this. Checkout the demo here. The sidebar goes down when the screen size is smaller than 768px. But, Sydney does it in less than 992px. Perhaps you want this should be 768px as well? If so, you’ll need to add this CSS code Appearance > Customize > Additional CSS from your site dashboard.


@media only screen and (min-width:768px) {
  
  #primary.col-md-9 {
    width: 75%;
    float: left;
      
  }
  
  #secondary.col-md-3 {
    width: 25%;
    float: left;
  }

}

Regards,
Kharis