Adjust when site changes to mobile view

Support
#1

Hello, is there a way to adjust when the site changes to the mobile view (collapsed menu bar, sidebar at the bottom)?
Right now, it changes to mobile view at 979px, and I hope to make it so that keeps desktop view for a bit longer.
Thanks in advance.

#2

Hi There,

We can adjust it using custom CSS:

      .x-nav-wrap.desktop {
      display: block; 
   }
   .masthead-inline .x-btn-navbar {
    display: none;
}
}
@media (max-width: 879px){ /*Adjust 879 to your preferred screen width where it will switch to mobile*/
      .x-nav-wrap.desktop {
      display: none; 
   }
   .masthead-inline .x-btn-navbar {
    display: block;
}
}```


Hope this helps.
#3

Hi,

I don’t see any changes with the code provided.

Thanks.

#4

Hi There,

Please update the given code to this:

@media (min-width: 768px) and (max-width: 979px) {
	/*left main container*/
	.x-main.left {
		width: 68% !important;
		float: left;
	}
	/*right sidebar*/
	.x-sidebar.right {
		width: 29.8%!important;
		float: right;
		margin-top: 0;
	}
	/*menu*/
	.x-nav-wrap.desktop {
		display: block; 
	}
	.masthead-inline .x-btn-navbar {
		display: none;
	}
}

Then clear your browser’s cache and caching plugin before you preview the page.

We would like to help you on this but further customization will fall outside of the support that we can offer as this is not related to an issue with the theme and instead has to do with your customization of it.

Thank you for your understanding.

#5

Hi,

I tried the code above but it doesn’t seem to be working?
It still is changing to the mobile view at 979px.
I cleared both caches and even tried it in incognito.

Thanks.

#6

Hello There,

Thanks for updating in! Upon checking your site in my browser, this is what I am seeing:

I noticed that you are using CloudFlare. Please login to your CloudFlare account and purge everything. You also need to clear your browser cache or use private browsing mode before you test your site again.

Please let us know how it goes.

#7

Hi,

The main reason I’m looking into adjusting the width it changes to mobile view is because of the sidebar, yet this code doesn’t affect it. Is there a reason why the sidebar still disappears at 979px? I’m not trying to change when it changes to mobile view drastically, just a few pixels.

Thanks.

#8

Hello There,

Thanks for updating in and for the clarification. All of our staff thought you want to display the desktop menu in smaller screens which is why they gave you the code. That code is not related to your issue since you want to display the sidebar on some smaller screens. You can make use of this code instead:

@media(min-width: 768px){
  body .x-main.left {
    float: left;
    width: 68% !important;
  }
  body .x-sidebar.right {
    float: right;
    margin-top: 0;
    width: 29.8%!important;
  }
}

Hope this helps. Kindly let us know.

#9

My goal was to keep the desktop view (sidebar, menu, and all) on smaller screens.
Sorry if that wasn’t clear.
Thanks.

#10

Hi again,

You can add the following code in your Customizer:

@media screen and (max-width: 899px) {
  body .x-main.left {
    float: left;
    width: 68% !important;
  }
  body .x-sidebar.right {
    float: right;
    margin-top: 0;
    width: 29.8%!important;
  }
}

Please note that this will cause content display issues as it is not the recommended way and not the nature of the theme. We won’t be able support the issues caused by the above customization.

Thank you for understanding!