lukeed / bee3d

Support Forum for Bee3D Slider, found @ http://www.lukeed.com/demo/bee3D
MIT License
7 stars 2 forks source link

Issue with Mobile layout for the slider #73

Closed nanogelato closed 5 years ago

nanogelato commented 5 years ago

Hi Lukeed,

Thanks for the awesome plugin.

After integrating it to our website, there are some issue with the mobile layout that we can’t seem to find a solution for it.

We use the Cowerflow effect, there’s always some padding to the right, and This also happens on your demo website. Here a screen recording of the issue:

https://streamable.com/gyr48 Hope you can get back to us as soon as you can.

Thanks,

lukeed commented 5 years ago

Hey thanks! Just saw your email.

Can you send me the URL too? I've already verified (thru my demo page) that this is a Safari only bug. With your URL I can tell you the fix directly.

Thanks, Luke

nanogelato commented 5 years ago

Hi Luke,

Thanks for the quick response. Follow this link: http://yb.devmatik.com/story-timeline/ 

Thanks,

Nano.  On Monday, March 18, 2019, 11:25:48 a.m. EDT, Luke Edwards notifications@github.com wrote:

Hey thanks! Just saw your email.

Can you send me the URL too? I've already verified (thru my demo page) that this is a Safari only bug. With your URL I can tell you the fix directly.

Thanks, Luke

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

lukeed commented 5 years ago

Hey, thanks

You are missing overflow-x: hidden on your #content wrapper:

.story-detail #content {
  position: relative;
  overflow-x: hidden;
}

That fixes your entire page from overflowing horizontally. You have other elements on your page (not sure which) that are contributing here. I know this because if I remove the Bee3D slider from your page, there's still horizontal scrolling.

The fix above fixes everything 👍

Hope that helps~!

nanogelato commented 5 years ago

Thank you sooo much Luke! This works great! On Monday, March 18, 2019, 12:14:32 p.m. EDT, Luke Edwards notifications@github.com wrote:

Hey, thanks

You are missing overflow-x: hidden on your #content wrapper: .story-detail #content { position: relative; overflow-x: hidden; } That fixes your entire page from overflowing horizontally. You have other elements on your page (not sure which) that are contributing here. I know this because if I remove the Bee3D slider from your page, there's still horizontal scrolling.

The fix above fixes everything 👍

Hope that helps~!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

lukeed commented 5 years ago

Awesome! 🙌