chovanecm
Result lists should be sorted by first entry
ATM if sorting by results that are lists sorts by the last element of that list. Should be the first instead.
Narrow a window from the left side and as the content begins collapsing and responding normally, watch for a horizontal scroll bar to pop up. It may even appear and then disappear at a smaller size if you keep going, it seems dependent on the random actions of the script for The Fox & The Grapes. If it the horizontal scroll doesn't appear, you can usually prompt it by moving the grapes around with the fox cursor - it'll break out of its parent to the right. I'm in the latest version of Chrome.
The scroll appears
The scroll lengthens as the grapes are pushed out to the right when the window is made even narrower
Excuse my messy WIP in the back haha.
Hmm, I have been resizing the width but still haven't been able to replicate. I'll keep digging around. Curious, what is the little watermark/icon on the lower bottom right corner of your browser? It shows up on both screenshots you took where the cursor escapes the boundary of the page canvas.
(BTW the WIP in the back looks fab!)
I'll keep poking around myself: blocking out the script and relevant html in a local version solves it for me, but neither one by themselves. I may have been wrong about the culprit the more that I look at it, but it seems like the only element on the page whose width was not specifically the current width of the page or smaller (it's auto according to Chrome dev tools, but I'm not sure how the width of js scripts work).
It's a Chrome extension for Feedly, an rss feed, but it does still happen with extensions disabled.
Thanks!
Aha! I was wrong. Another element was breaking the width at smaller sizes, which simply allowed the grape to bounce outside its boundaries and increase the horizontal scroll already present. It looks like the .container for .section-fox-lion is set to width: 960px; and sticks to that when everything else has scaled down. It's inheriting the value from the general styles at the top of the stylesheet - changing .container to max-width: 960px; fixes it for me. Scrollbar disappears and everything is collapsed quite elegantly. Interesting because several other compositions inherit the same .container but don't have that problem. Perhaps they have more stringent media queries.
width: 960px; persists
changing it to max-width: in dev tools removes the scroll and everything looks as it should in narrower browsers
Not sure if this is a sustainable solution as the general .container was probably styled that way for a reason, and other compositions have no problems with it. Also strange you can't replicate it, hmm.
I too can see the horizontal scroll appear in Chrome, it is present from 660px through 980px browser width. I can't replicate the grapes shifting to the right though.
I just pushed an update—changing the .container width to max-width: 960px—to, hopefully, address the horizontal scroll. I'm still unable to get the grapes to move off the page so I can't tell if that resolved it.
Hey all—hopping in here as I created the original section.
Great catch @laurelobrien - I was able to replicate using the steps you outlined.
@femmebot: I've added an additional fix here: https://github.com/femmebot/google-type/pull/39 which should cover any browser resizing/document flow breaking from the grapes.
@laurelobrien, @dschiffner: once the pull RQ is in, please verify everything is working for you.
As a side note, most users won't be using the responsive site like this: http://i.imgur.com/YkbaV.gif :wink:
Aha, no worries, that's just my quick n dirty way of seeing when and if things break as they size down before seeing if the actual device gets the problem too. Sometimes it catches the browser in awkward breakpoints that don't "exist" though, so to speak. It's working for me, looks great!