Flexbox lightbox, help with css please.

[pziecina]

Hi All, Help

I know I have done something wrong, but I cannot find what it is.

http://www.pziecina.com/lightbox/lightbox.html

I was creating a flexbox image gallery with a lightbox, for a possible demo in a future discussion. Which works, (sort of) but when I reduced the browser size to simulate smaller screens, (to work out the lightbox overlay, and positioning) I now have a large top margin after the initial text then after every 2nd image.

I can't work out if this is something to do with the flexbox css or my html code.

If you could take a look and offer a solution, (or even any suggestions) I would be grateful, it's probably something simple but after writing the css animation code I've gone code blind .

[pziecina]

Should have said -

This is happening in Chrome, FF is o/k.

BTW - Any comments on this would also be welcome.

[Jon Fritz · Accepted solution]

In the dev tools, I'm seeing...

@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 800px)

ul.thumbs li:nth-of-type(2n+1) {margin 300px 0 0 3em;

...in lightbox.html line 321 as the culprit.

At least turning it off fixes it in Chrome.

[osgood_]

margin: 300px? should be 0

@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width:800px){

ul.thumbs li:nth-of-type(2n+1){

margin:300px 0 0 3em;

-webkit-box-shadow: none;

-moz-box-shadow: none;

-ms-box-shadow: none;

-o-box-shadow: none;

box-shadow: none;

}

[pziecina]

Thank you Jon and Os,

I placed that in the code to fix the no flex wrap support problem with the old flexbox syntax on iOS 1 to 6 and Android 2 to 4.

Looks like I will have to forget trying to offer a better experiance for those older devices, and trying to simulate flex wrap, and just leave them to display the images vertically.

[BenPleysier]

You could use BS

[Nancy OShea]

LOL.

[pziecina]

BenPleysier wrote:

You could use BS

Why do something easy when I can make it difficult

[BenPleysier]