Following the atomic styling pattern, the images are next in line for styling. They are so large that they are cut off unless the browser window is also large. Add a styling rule for .thumbnail-image in styles.css to make the thumbnails fit in the window:

...
a {
  text-decoration: none;
}

.thumbnail-image {
  width: 100%;
}

.thumbnail-title {
  ...
}

You set the width to 100%, which constrains it to the width of its container. This means that as you widen the browser window, the images get proportionally larger. Check it out: Save styles.css, switch to your browser, and make your browser window larger and smaller. The images grow and shrink along with the browser window, always keeping their proportions. Figure 3.17 shows Ottergram in one narrow and one wider browser window.

Figure 3.17  Fitting an image by width

If you look closely, the spacing around the .thumbnail-titles is off, so that it appears that the titles go with the images below them. Fix that in styles.css by setting the .thumbnail-image’s display property to block.

...
.thumbnail-image {
  display: block;
  width: 100%;
}
...

Now the space between the image and its title is gone (Figure 3.18).

Figure 3.18  After setting .thumbnail-image to display: block

Why does this work? Images are display: inline by default. They are subject to similar rendering rules as text. When text is rendered, the letters are drawn along a common baseline. Some characters, such as p, q, and y, have a descender - the tail that drops below this baseline. To accommodate them, there is some whitespace included below the baseline.

Setting the display property to block removes the whitespace because there is no need to accommodate any text (or any other display: inline elements that might be rendered alongside the image).