Scrolling vertically on mobile

My partner is currently making a website and everything is looking great on both the desktop and tablet version however on the mobile version it has this bar down the side of the whole page, you can move the page horizontally. We feel it has something to do with the selection bar not fitting on the page for some reason.

Any help would be appreciated, thanks.

Hi. Try adding this code into Design > Custom CSS

html, body {
	overflow-x: hidden;
}

Thankyou for your response this fixes the scrolling problem but the bar is now off screen and hard to access 

Found out it is this code that is causing the problem

.header-title-nav-wrapper {

  flex: 1 0 85% !important;

  flex-wrap: nowrap !important;

}

.header-nav {

  width: 100% !important;

  flex: 1 1 100% !important;

}

Is there any way we could make this code onlt effect the desktop version and not the moble version 

On 3/29/2021 at 9:29 PM, Sausagemunk said:

Thankyou for your response this fixes the scrolling problem but the bar is now off screen and hard to access 

 

Found out it is this code that is causing the problem

 

.header-title-nav-wrapper {

  flex: 1 0 85% !important;

  flex-wrap: nowrap !important;

}

.header-nav {

  width: 100% !important;

  flex: 1 1 100% !important;

}

 

Is there any way we could make this code onlt effect the desktop version and not the moble version 

 

Remove it & use this code

/* Desktop only */
@media screen and (min-width:992px) {
.header-title-nav-wrapper {
  flex: 1 0 85% !important;
  flex-wrap: nowrap !important;
}
.header-nav {
  width: 100% !important;
  flex: 1 1 100% !important;
}
}