On page 97, it says we do not want the thumbnails to cause the browser to scroll. I am not sure what that means. We have been scrolling through the thumbnails, but the entire browser window.
Either way, I have added overflow: hidden and I cannot see any difference.
And from reading documentation, I thought overflow: hidden would cause no scrollbar to show at all.
Hi @ballgeier!
You’re correct, up to this point, we’re not scrolling the browser to scroll through the thumbnails.
But, the goal of chapter 5 is to create a different layout using an @media query.
In this second layout, the thumbnails are stacked vertically, and would be taller than the browser could show. To see the thumbnails that are further down, you would have to scroll the entire browser window. If you scrolled the browser window down, you would no longer see the .detail-image.
To prevent this, we add overflow: hidden.
As an experiment, try commenting out the line overflow: hidden and saving your changes to styles.css. When that line is commented, do you see the difference in the scrolling?
-Chris
Hi @ballgeier and @chrisaquino1.
I was under the same assumption. I thought the scroll bar would disappear. I tried to comment it out and nothing changed. The scroll bar remain and the page acted like it did before. Only the thumbnails were scroll-able. I’m currently using Chrome Version 56.0.2924.87. So I thought maybe I would try Firefox out and there is a difference.
In Firefox the scroll bar still remains but the difference is that when I comment out the overflow:hidden that the whole is scroll-able. and the main otter picture drops to the bottom of page.
-Lincxx