Howdy WPMUdev folks,
I'm at an impasse with a new site, and I need some expert eyes to help troubleshoot.
See it here: http://develop.kellerdigital.com/pandopopulus
The entire site is essentially a slider (using RoyalSlider). The slider fills the entire width and height of the browser, and needs to look good across as many devices as possible. I need help with the following cross-browser issues:
1) End-client sees white space on right side and bottom - I am unable to replicate on my machines, and have no idea why this is happening.
2) End-client is unable to scroll down on last slide (with text). I have set "overflow-y:scroll", and can scroll on my machines. Others are able to scroll as well. No idea why this is happening.
3) On last slide "overflow-y:scroll" creates a double scrollbar on right side of browser window. This happens on some browser/machine configs and not others. I'm unable to replicate this on my machines, even with the same browsers. If not set to "scroll", the second scrollbar goes away, but am unable to scroll.
4) Overall cross-compatibility is not my strong suit. What can be improved? What am I botching?
Site is on WP 3.8.1 and using newest version of RoyalSlider (3.1.7). Only other plugins are Gravity Forms 1.8.5 and WordPress SEO 1.4.25. Theme is "underscores" (or _s).
I used media queries extensively to adjust everything on different screen sizes and resolutions. I actually had to create max-height queries every 25px from 1300px height down to 300px, setting a "max-height" on the RoyalSlider container equal to the @media max-height for each 25px increment, to avoid overflow and scrolling.
I'm at a loss at this point. Any input from anyone would be greatly appreciated.