CODEWITHSUNDEEP
htmlcssresponsive-design
zkwsk
zkwsk

Reputation: 2126

Avoid scrolling to off-canvas content

I am doing a small tutorial on responsive design, but I have a problem.

I am going with the classic off-canvas menu swiping in from the left side, but when I enable the menu I can still scroll horizontally to see the full content, rather than using the menu-button to hide the menu.

See the following pen:

http://codepen.io/webconsult/pen/jmCit

Note that codepen hides the tag. For the meta viewport tag I am using:

<meta name="viewport" content="width=device-width, initial-scale=1">

I am suspecting that I should set up the the viewport tag differently? You can play around with the viewport tag by clicking on the settings-cog in the html frame.

Upvotes: 0

Views: 313

Answers (1)

Sudheer
Sudheer

Reputation: 2985

Add this to your css

body {
overflow-x:hidden;
}

you have 

.site-wrapper {
width:100%;
}

according to your css on larger screens the main content occupies 100% of width. On smaller screens when you open your off-canvas menu - it produces horizontal-scroll because your .site-wrapper+off canvas occupy more than 100% of width -100% for warrper + 75% aside.navigation.

By adding overflow-x:hidden; on body it will the scroll-bar.

This is not the best solution though - having 

.site-wrapper {
  overflow-x:hidden;
}

is better but something is up with your header -behaves a little wierd when i add this property.

Upvotes: 1

Related Questions