This week I have continued in my quest to get my site working on mobile. I wanted to give the Shift stack a try on one of my pages since I liked how it split the image, title, and description up into those sections. I was expecting the text to be tight in portrait mode on a small phone but I was a little surprised when it was just as tight in landscape with so much blank space on the side. It’s probably about half blank and on a large phone screen I would guess it would be two-thirds blank.
As far as I can tell there is no way to read the descriptions other than when you are on the desktop? (and some iPad Pro models) Even though I haven’t thoroughly test this on an iPad at all when I run it though the simulator it looks like even some iPad models pack that text together. It looks like mainly the older, lower resolution models. My first thought was to shorten the title by removing the year for an example, but then it seems like the way it is working is to not add any spacing between the items no matter how much text is taken out.
The main thing I am trying to avoid right now is the inactive shift items look they are one big item. The type style and spacing between “Kundun 1997” and “Seven Years…” don’t look like two different things the way they are now. There is an option to “remove left and right padding” but that doesn’t seem to change much that I can see.