I have a dynamic photo list, pulled from the CMS. Photos are vertical and horizontal. I am trying to create a “dynamic grid” where all horizontal photos are 100% wide and vertical photos are 50% wide.
I was able to achieve this with the help of JS.
codepen with my code
However, I have trouble targeting the last odd vertical shot that has a horizontal shot in front of it. I would like this photo to be 100% wide as well, so that there would be no unnecessary break.
I tried to use :nth-child() pseudo class but, that was not helpful at all. – its select only first child.
.wide + .portfolio-item:nth-last-child(odd) {
width: 100%;
}