Here’s a pic of what happens:
This isn’t supposed to happen right?
What you’re seeing is an oversight in the way we designed the example.
The code doesn’t account for certain circumstances when resizing the browser. This happens primarily when the height of the viewport is less than a certain size.
We’ve added this to our bug tracker for the book examples, and we hope to have a more complete version of the code posted soon.
I have been working through this book on my 27" Retian 5K iMac. I have my browser (Chrome) not in full screen mode, but expand to cover the entire Space it is on. As such, when I don’t have the Chrome DevTools open, I have different results than what is in the book; namely the detail image covered the header during Chapters 3 & 4 and, because my browser was so wide, I didn’t have horizontal scrolling in Chrome. Opening the DevTools makes the site look much more like the book.
For grins, I also would check the site on my iPhone 6S running iOS 10. When my phone was in portrait mode, the website matched the book exactly, but when I rotated to landscape I would have similar problems to what was described in the OP’s post.
You do say in the book that if our browser is wide than taller, the layout will not look correct, at least as we go through building the site. (I assume that by the end of Ottergram the site will work correctly if the browser is wider than taller.)
It might be worth in future updates to keep the example the way it is but make a few mentions to the fact that “it looks good if your browser is taller than wider, but not the other way around” and walk the reader through solving that particular problem.
I think it would also be a great value add if you were to explain how to view the website on a second device-presumably a phone (i.e. a screenshot and a quick explanation of private IP addresses vs. public IP addresses) and, once again, point out the problem with Ottergram in its early stages when a phone is in landscape mode.
A final suggestion for future editions of the book: while it is most likely outside the scope of the book, it might be worth a two or three page appendix explaining the difference between public and private IP addresses, domain names and how one can point a domain name to a website. Perhaps there should be a whole exercise on deployment.
Thanks for the suggestions!
You’re totally right, the example isn’t as comprehensive as we would have liked, and we’ve added to our issue tracker based on your feedback. Addressing this layout issue is one of our main targets for future editions.
was this bug ever fixed?
if you add a flex-shrink: 0; for flex: 1 0 auto; on the detail image frame it fixes this
Another solution was suggested here: Responsive Design when in landscape mode on an iPhone 5/5s, 6/6s and 7