Question

I’m using the code below so that my arrangement of images adjusts from 5 on a row to 4 and then down to 2 based on different widths of container.

In the first instance it correctly sets every 5th image (the last on each row) so that it has no right margin. When it scales down to 4 images on each it changes so that every 4th image has no right margin but for some reason the 5th still has no right margin as well. Furthermore, when it snaps to 2 images on each row, the 5th still has no right margin.

What do I need to change to stop that from happening? Thanks in advance of any help.

@media (max-width: 1200px) {
  #photos img {
  /* 5 images wide */
  width: 18% ; margin: 0 2.5% 2.5% 0;
  }
  #photos img:nth-child(5n) { margin: 0 0 2.5% 0; }
}

@media (max-width: 800px) {
  #photos img {
  /* 4 images wide */
  width: 22% ; margin: 0 4% 4% 0;
  }
  #photos img:nth-child(4n) { margin: 0 0 4% 0; }
}

@media (max-width: 400px) {
  #photos img {
  /* 2 images wide */
  width: 48% ; margin: 0 4% 4% 0;
  }
  #photos img:nth-child(2n) { margin: 0 0 4% 0; }
}

Edit : Here’s a JSFiddle – I’ve added one more media query than listed below but the problem is still the same.

Answer 1

The property you defined for max-width:1200px, is used for both max-width:800px and 400px.

You have to redefined your :nth-child(5n)

@media (max-width: 800px) {
  #photos img {
  /* 4 images wide */
  width: 22% ; margin: 0 4% 4% 0;
  }
  #photos img:nth-child(5n) { margin: 0 4% 4% 0; }
  #photos img:nth-child(4n) { margin: 0 0 4% 0; }
}

Maybe that’s better to defined a min-width in your query

@media (min-width:800px) and (max-width: 1200px) {
  #photos img:nth-child(5n) { margin: 0 0 2.5% 0; }
}

So the margin is just applied when screen size beetween 1200 and 800.