Please take a look at this page and click the image to go

Please take a look at this page and click the image to go to the lightbox.
http://divinationbygeorge.com/home/bearing-balanced-l-rods-foam-handle-bbfh/

I need to make the maximum height of the image in the lightbox 750px, vertically centered.

I looked at the CSS and couldn't figure out the selector. - Maybe it requires something more that CSS?

  • hostricity
    • Site Builder, Child of Zeus

    Tried this:

    .lg-image {
    display: inline-block;
    vertical-align: middle;
    max-width: 750px;
    max-height: 100%;
    }

    AND

    .lg-image {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    max-height: 750px;
    }

    Neither had any effect.

    Please note that the intention here is to reduce the size of the image sufficiently to eliminate the scroll bar on the right and to leave enough space around the image so that the lightbox controls aren't getting covered up.

  • Michael Bissett
    • Recruit

    Hey @hostricity, Michael here! :slight_smile:

    That scrollbar you're seeing there is actually provided by the theme itself, you'll see the "overflow-y" rule here inside of lines 94-99 of the style.css file:

    html {
    	font-size: 100%;
    	overflow-y: scroll;
    	-webkit-text-size-adjust: 100%;
    	-ms-text-size-adjust: 100%;
    }

    If you were to set that to hidden inside your browser's code inspector (I use Chrome's Developer Tools), you'd see the difference then. :slight_smile:

    To remedy this would require a bit of jQuery, as you'd not only need to temporarily adjust that rule (to change the overflow-y to "hidden" when the lightbox is clicked), but you'd also need to revert the changes when the lightbox has been closed (otherwise you'll be without a scrollbar).

    You may find the following resources to be of use:

    https://api.jquery.com/click/
    http://stackoverflow.com/questions/6096739/jquery-change-style-of-a-div-on-click

    Not quite sure I'm seeing where the lightbox controls are being covered up, though, could you elaborate on that?

    Kind Regards,
    Michael

  • hostricity
    • Site Builder, Child of Zeus

    I think I misspoke. What I need to do is make the image in the light box smaller, so that it will fit on the screen with a small border so that it doesn't cover the controls and does NOT ACTIVATE the scroll bar. Having the scroll bar there is fine, but the image needs to be small enough that the scrollbar doesn't get activated.

    I couldn't get the initial CSS provided above to reduce the size of the image.

    Sorry for the confusion.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.