Docs

[Zack F]

Hi,
I can’t seem to find the exact question I have. Basically I want my website to switch to the “mobile” phone style layout on an ipad when looked at either in portrait or landscape view. It seems to me that it would be simple enough to just change the default @media breakpoint to switch to mobile even on a bigger screen size. But I can’t find how to change the default breakpoint.

Can you please help me change the default breakpoint?

Thanks.

[Rue Nel]

Hello There,

Thanks for writing in! The default breakpoint of X is 980 pixels. The iPad has a 768 pixels width in the portrait and 1024 pixels when viewed in landscape. Do you want to change the breakpoint so that the both the landscape and portrait view will look like just mobile design?

Please clarify. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[Zack F]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for wriitng back. Let’s follow this and adjust the breakpoints with your own screen size – https://community.theme.co/forums/topic/making-the-responsive-menu-show-at-certain-screen-port-width/#post-779359

Cheers!

[Zack F]

The post you are referring to is showing the breakpoints for the MOBILE MENU, not the entire site. Please, I am looking to change the breakpoint for the ENTIRE SITE.

[Rue Nel]

Hello There,

To resolve your issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (max-width: 1024px) {
 .masthead .x-btn-navbar {
  display: inline-block;
  float: none;
  margin-left:  auto;
  margin-right: auto;
 }

 .x-navbar-inner {
   text-align: center;
 }
 
 .x-nav-wrap.desktop {
  display: none;
 }

 .x-nav-wrap.mobile {
  display: none;
 }

 .x-nav-wrap.mobile.collapse.in {
  display: block;
 }

  .x-column.x-sm {
    float: none;
    width: 100%;
    margin-right: 0;
  }
}

Please let us know if this works out for you.

[Zack F]

That is what I was looking for. Thanks!

[Jade]

You’re welcome, Zack.

[Author]

Posts