Responsive Design when in landscape mode on an iPhone 5/5s, 6/6s and 7

@chrisaquino1 Chris, @todd et. all,

Ottergram did not look right at all when I rotated my iPhone 6s into landscape mode. The detail image was proportionally high to match the width of 90%. As such, the detail image covered the header and the thumbnails below.

Not liking what I saw, I decided to see if I could figure our at way with just CSS to make the design correctly responsive in landscape mode on an iPhone. It took a lot of trial and error, but I came up with this solution. The scrolling of the thumbnails isn’t as smooth as I would like for it to be, but that appears to be an browser/CPU issue.

Additionally, I don’t like how the detail view is scrollable; if anyone has any thoughts on how to make the detail view not scrollable but rather take up the space it currently does on the commit I liked to above and scroll the webpage as a whole, I would be very grateful.

I would also appreciate any feedback that anyone has for my solution to this particular problem.


I’ll post a link to your solution in some of the discussions related to this issue.