search

peachananr / onepage-scroll

Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin
http://peachananr.github.io/onepage-scroll/Demo/demo.html
9.54k stars 2.06k forks source link

ResponsiveFallback: there is unwanted white space on right #118

Open atomicreach opened 10 years ago

atomicreach commented 10 years ago

I have this plugin disabled for mobile device(using responsive fallback feature). It works great, only problem is that it throws extra white space on the right side of the screen.

I have following structure:

< body> < div id=main> < section> < section> < section>

Eein commented 10 years ago

Having the same issue, but also for desktop. My intention was to disable the plugin for all subpages to allow manual scrolling.

It seems this issue isn't affected by firefox on windows or chrome/firefox/safari on mac, so i have a feeling it has something to do with the overflow. (might be browser specific.)

My only change was: .disabled-onepage-scroll .onepage-wrapper .section { // position: relative !important; // top: auto !important; }

so that i could use background colors on each frame, while also using a js vertical centering plugin.

Anyone else having this issue?

ar-hz: have you come up with a solution yet?

Eein commented 10 years ago

I actually found out my whitespace is being caused by something being width:100% in the container while also having padding. @ar-hz Make sure you check if any elements that have 100% and padding do not have horizontal padding... (change padding: 5px; to padding: 5px 0;

atomicreach commented 10 years ago

Thanks @Eein . That solution eliminates white space but disable scrolling at the same time.

crookedneighbor commented 10 years ago

@Eein Alternatively, you could set box-sizing to border-box.