I have a Front Page layout that features a series of Views-generated slides displaying randomly in timed sequence. The View is a large image that spans the main content column, with an overlay containing a Title and blurb.
The global.css file sets the View to display the image at 290px to fit in a 320px mobile display, and the text overlay appears just below it. Then in the CSS files for narrow, normal, and wide, the sizes are reset for each display and the (semi-transparent) overlay sits on top of the image.
This all works fine, except that there are some spacing issues as you adjust a browser window between display sizes. For example, when the browser is sized from very small (below 400px) to larger, the space below the image doesn't collapse when the overlay shifts up over the image. Or, if the browser is at a normal width (960px) and then sized wider, the page elements below the slide are partially hidden under the now larger slide because the spacing isn't updated with the changed size.
The display corrects itself when the browser is refreshed... everything falls into place as intended. But it does require a refresh.
Of course, the normal visitor isn't going to be constantly re-sizing their browser window. So this isn't a critical issue. But I was wondering if there might be some way to refresh the screen when the size changes so that the relative spacing issues are addressed automatically.
Comments
Same issue
I just noticed a similar thing happening tonight. It doesn't happen to me in Firefox (which I use as my default browser because I use Firebug). But then I noticed that it requires a refresh in Safari and Chrome. I'd never noticed it before tonight, then saw your post. It seems I wasn't having this happen previously, so I'm curious to see if anyone has a solution.
By the way I was out at the local Apple store doing some testing of my responsive theme, and the sales people were really impressed when I showed them the layout changing when I flipped the iPad around, then showed them the site on a laptop and iPhone. And I owe it all to Omega's hard working developers!
Anyone find a resolution?
I have just started implementing responsive themes, and same issue as rggoode - I have a custom view (views slideshow), that is behaving the same way and requires a page refresh on resize. It's most prevalent when I have a layout change between portrait and landscape mode on a tablet. That's when people notice as they swing there iPads around.
As stated previously - in most other cases users are not resizing browser window very often.
But wondering if anyone found a solution to this given these previous posts are from 10 months ago?