This is what it looks like if the 4 images are each nested separately. class=responsive, then class=img, then the image within that.
this is what it looks like if all 4 images are fully nester together, in one class=img div within the one class=responsive div.
the Responsiveness div was originally set to 25% screen width. Because of this, multiple Responsiveness divs could sit next to each other, but if you put multiple images in the same responsiveness div they would only stack vertically and not horizontally.
when i set responsiveness width to 100% instead, and adjust div.img img width from 300px to 23% (to account for margins) now we can fit the images 4 wide within one responsiveness div.
when i make those changes, sequential responsiveness divs can no longer fit side by side.
it makes sense that having them nested in the same div.img or not doesn't make a difference cuz that just determines the border quality. but like. now that the Responsiveness div is adjusted so you can fit images 4 wide in there, why can the div.img boxes not fit side by side?
this is what it looks like if they're not in the responsiveness div at all-- exactly the same except that the caption shows up in lightbox after the final image
putting the last 2 images into their own div means the text doesn't follow into lightbox.
And if that div is the img div with border properties then the images won't have bright borders in the ligthbox?