Jump to content

Scrolling vertically on mobile

Recommended Posts

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.

Screenshot_20210314-213740_Chrome.jpg

Link to comment
  • 2 weeks later...
  • Replies 3
  • Views 811
  • Created
  • Last Reply

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 

 

Link to comment
  • 2 weeks later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.