html5 - Avoid scrolling to off-canvas content -
html5 - Avoid scrolling to off-canvas content -
i doing little tutorial on responsive design, have problem.
i going classic off-canvas menu swiping in left side, when enable menu can still scroll horizontally see total content, rather using menu-button hide menu.
see next pen:
http://codepen.io/webconsult/pen/jmcit
note codepen hides tag. meta viewport tag using:
<meta name="viewport" content="width=device-width, initial-scale=1">
i suspecting should set the viewport tag differently? can play around viewport tag clicking on settings-cog in html frame.
add css
body { overflow-x:hidden; }
you have
.site-wrapper { width:100%; }
according css on larger screens main content occupies 100% of width. on smaller screens when open off-canvas menu - produces horizontal-scroll because .site-wrapper
+off canvas
occupy more 100% of width -100% warrper
+ 75% aside.navigation
.
by adding overflow-x:hidden;
on body scroll-bar.
this not best solution though - having
.site-wrapper { overflow-x:hidden; }
is improve header -behaves little wierd when add together property.
html5 css3 responsive-design
Comments
Post a Comment