How to align images contained in a ul in some sort image gallery

Question

I have a symmetrical grid. i've set my output type to float with 6 columns. My goal was to display list items out of an unordered list, images in this case, in some sort of an image gallery (gist).

mobile layout: all images 100% in width vertically aligned.

bp500px: each image is 3 columns wide - works in nicely.

bp750px: each image is 2 columns wide - the layout breaks.

does the float-span doesn't apply to the second item in the list - but basically float-span(2) is set for each item number 1 and 2 and float-span(2,last) for each third?

or is the combination $output: float and float-span already the wrong choice for that kind of goal in a symmetrical grid environment? better to go with the isolation mixins?

Best regards Ralf

Answer 1

This would be easier to debug if there were code associated with it, but presumably for your bp500px you have something like li:nth-of-type(even) for last. That has a higher selector weight than simply li, and since media queries have a lower selector weight than pseudo selectors, you need to do one of the following things:

• Undo the :nth-of-type(even) selector in bp750px by re-calling it with the span you want _ Fencing bp500px so that instead of (min-width: 500px) you use (min-width: 500px) and (max-width: 749px)