Next/Previous image overlap main image

[bmomjian]

On small screens like mobile phones, when viewing a main image (not an index of images), the next/previous images appear on top of the main image. I was able to make next/previous images invisible if they overlap the main image by adding this to SHARED_basic.css:

div#image_img img {
                position: relative;
                z-index: 1;
}

This is for lazygal version 0.10.2.

[bmomjian]

I ended up changing my approach by forcing lazygal prev/next images to be below main image, not over it
and force the main image to not exceed the screen width and height. It appears lazygal was never designed to work on mobile where the screen width is often < 1324; this addition to SHARED_basic.css improves that:

/* 1324px is where prev/next images start to overlap the main image */
@media (max-width: 1324px) {
    /* prevent image from exceeding screen width and height */
    div#image_img img {
        width: auto;
        max-width: 100vw;
        height: auto;
        max-height: 100vh;
    }

    /* change from "absolute", use !important to override */
    div.prevnext {
        position: relative !important;
    }

    div#prev_link {
        float: left;
    }

    div#next_link {
        float: right;
    }
}