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

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -